This is a migrated thread and some comments may be shown as answers.

Disable Drag Drop Clientside

3 Answers 26 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Piyushkumar
Top achievements
Rank 1
Piyushkumar asked on 11 Nov 2010, 08:26 PM
Hi All,
I have a typical requirement... I want to disable drag drop on certain tags inside Editor.

Imagine I am in design mode (bcz I cannot draw it here) but corresponding Html will be like this:

<div id="Div1"> some Div1 content... DON'T Allow Drag Drop Here</div>
<div id="Div2"> some Div2 content... Allow Drag Drop Here</div>

In short, I want to disable certain perts of Editor. Is it possible?
If I can get client side event for Drag/Drop, it can be done (I think)

Thanks,
Piyushkumar

3 Answers, 1 is accepted

Sort by
0
Accepted
Dobromir
Telerik team
answered on 15 Nov 2010, 02:04 PM
Hi Piyushkumar,

You can achieve the required functionality by setting editable and non-editable areas inside the editor. You can find more detailed information on the subject in the following help article:
Editable and Non-editable Areas

All the best,
Dobromir
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Piyushkumar
Top achievements
Rank 1
answered on 18 Nov 2010, 05:41 PM
Hi,

Thanks for the reply. It works now.
Only one problem... I have a table inside Div. both are restricted from drag/drop. The user is still able to drag/drop beside table inside Div. (See attached explainaton)

Thanks
Piyush
0
Dobromir
Telerik team
answered on 23 Nov 2010, 12:47 PM
Hi Piyush,

Such behavior might occur if there are more HTML elements inside the Div, for example if you have formatted the HTML code there will be some textnode elements representing the line feeds. By default, RadEditor has enabled IndentHTMLContent built-in filter which applies formatting. To avoid this behavior you can use one of the following approaches:
  • Disable the IndentHTMLContent and have the HTML of the non-editable area without any extra whitespaces, e.g.:
    <div contenteditable="false" id="myDiv" unselectable="on" style="-moz-user-select: none; border: 1px solid red;"><table contenteditable="false" unselectable="on" style="-moz-user-select: none; background-color: yellow; width: 0px;"><colgroup><col /><col /><col /></colgroup><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></div>
    You can find how to disable specific built-in content filter in the following help article:
    Content Filters
  • Execute a JavaScript function that will loop through the child nodes of the non-editable <div> and apply the needed properties to set them as non-editable as well, e.g.:
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
        <Content>
            <div style="-moz-user-select: none;border: red 1px solid;" contenteditable="false" unselectable="on" id="myDiv">
            <table style=" -moz-user-select: none;" contenteditable="false" unselectable="on">
                <tbody>
                    <tr>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
            </div>
            some content<br />
            some more content<br />           
        </Content>
    </telerik:RadEditor>
     
     
    <script type="text/javascript">
        function OnClientLoad(editor, args)
        {
            var oDoc = editor.get_document();
            var nonEditableDiv = oDoc.getElementById("myDiv");
     
            for (var i = 0; i < nonEditableDiv.childNodes.length; i++)
            {
                var child = nonEditableDiv.childNodes[i];
     
                child.setAttribute("contenteditable", "false");
                child.setAttribute("unselectable", "on");
                child.setAttribute("style", child.getAttribute("style") + "-moz-user-select: none;");
            }
        }
    </script>

I hope this helps.

Best wishes,
Dobromir
the Telerik team
Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
Editor
Asked by
Piyushkumar
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Piyushkumar
Top achievements
Rank 1
Share this question
or