Disable Drag Drop Clientside

[Piyushkumar]

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

[Dobromir]

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

[Piyushkumar]

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

[Dobromir]

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