RadListBox drag and drop into a RadEditor in IE

[Ricard Bertran Vall]

I'm using a RadListBox to drag and drop some values into a RadEditor, when I used it inFirefox it inserts de value where i have the cursor, but in IE it inserts the Radlistbox value always in the beginnig of the RadEditor content, i'm using the function: editor.pasteHtml("..."); as you have in the sample of emoticons, but no works for me..

Here I write me code lines:

<telerik:RadListBox ID="RadListbox1" runat="server" EnableDragAndDrop="True"  OnClientDragStart="OnClientDragStart" OnClientDragging="OnClientDragging" OnClientDropping="OnClientDropping"
        Width="250px" Height="100px" SelectionMode="Single" AllowDelete="false" >
        <ButtonSettings ReorderButtons="Common"></ButtonSettings>
    </telerik:RadListBox>

    <telerik:RadEditor OnClientLoad="OnClientLoad" ID="RadEditor1" runat="server" SkinID="DefaultSetOfTools" Visible="true" EditModes="Design"
        Height="500px" Width="650px" StripFormattingOnPaste="All" ToolsFile="~/App_GlobalResources/ToolsFile.xml"
        SpellCheckSettings-AllowAddCustom="false" SpellCheckSettings-DictionaryLanguage="es-ES"
        SpellCheckSettings-DictionaryPath="~/App_Data/RadSpell/" ContentAreaCssFile="EditorContentAreaStyles.css"  >
        <ImageManager EnableImageEditor="false" ViewPaths="" MaxUploadFileSize="512000" >
        </ImageManager>
        <Modules>
            <telerik:EditorModule Name="RadEditorStatistics" Visible="false" Enabled="true" />
            <telerik:EditorModule Name="RadEditorDomInspector" Visible="false" Enabled="true" />
            <telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" Enabled="true" />
            <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="false" Enabled="true" />
        </Modules>

<script type="text/javascript">
//<![CDATA[
 
     function OnClientLoad(editor) {
         var list = $find("<%= RadListbox1.ClientID %>");
         makeUnselectable(list.get_element());
     }

     function OnClientDragStart() {         
         setOverlayVisible(true);
     }

     function OnClientDropping(sender, args) {
         var editor = $find("<%=RadEditor1.ClientID%>");        
         var event = args.get_domEvent();        
         document.body.style.cursor = "default";

         var result = isMouseOverEditor(editor, event);
       
         if (result) {
             var span_value = args.get_sourceItem().get_text();

             if (span_value) {                                 
                 editor.setFocus();
                 editor.pasteHtml("{" + span_value + "}");
                 args.set_cancel(true);
             }
         }
         setOverlayVisible(false);
     }

     function OnClientDragging(sender, args) {
         var editor = editor = $find("<%=RadEditor1.ClientID%>");
         var event = args.get_domEvent();
         
         if (isMouseOverEditor(editor, event)) {
             document.body.style.cursor = "hand";
         }
         else {
             document.body.style.cursor = "no-drop";
         }
     }

     /* ================== Utility methods needed for the Drag/Drop ===============================*/
     
     function makeUnselectable(element) {         
         var nodes = element.getElementsByTagName("li");
         
         for (var index = 0; index < nodes.length; index++) {
             var elem = nodes[index];             
             elem.setAttribute("unselectable", "on");
         }
     }

     //Create and display an overlay to prevent the editor content area from capturing mouse events
     var shimId = null;
     function setOverlayVisible(toShow) {
         if (!shimId) {
             var div = document.createElement("DIV");
             document.body.appendChild(div);
             shimId = new Telerik.Web.UI.ModalExtender(div);
         }

         if (toShow) shimId.show();
         else shimId.hide();
     }
     
     //Check if the image is over the editor or not
     function isMouseOverEditor(editor, events) {
     
         var editorFrame = editor.get_contentAreaElement();
         var editorRect = $telerik.getBounds(editorFrame);

         var mouseX = events.clientX;
         var mouseY = events.clientY;         

         if (mouseX < (editorRect.x + editorRect.width) &&
             mouseX > editorRect.x &&
                mouseY < (editorRect.y + editorRect.height) &&
             mouseY > editorRect.y) {
             return true;
         }
         return false;
     }

</script>


And I want to know if I can have another icon when I drag one item to the RadEditor, not the forbidden icon.

Thanks,

[Rumen]

Hello Ricard,

Using the code below I was able to drag and drop an item from RadListBox to RadEditor in IE and Firefox on cursor position:

<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor) {
        var tree = $find("<%= RadListBox1.ClientID %>");
        makeUnselectable(tree.get_element());
    }

    function OnClientNodeDragStart() {
        setOverlayVisible(true);
    }

    function OnClientNodeDropping(sender, args) {
        var editor = $find("<%=RadEditor1.ClientID%>");
        var event = args.get_domEvent();

        document.body.style.cursor = "default";

        var result = isMouseOverEditor(editor, event);
        if (result) {
            var itemValue = sender.get_selectedItem().get_value();
            editor.setFocus();
            editor.pasteHtml(itemValue);
        }
        setOverlayVisible(false);
    }


    function OnClientNodeDragging(sender, args) {
        var editor = editor = $find("<%=RadEditor1.ClientID%>");
        var event = args.get_domEvent();

        if (isMouseOverEditor(editor, event)) {
            document.body.style.cursor = "hand";
        }
        else {
            document.body.style.cursor = "no-drop";
        }
    }


    /* ================== Utility methods needed for the Drag/Drop ===============================*/

    //Make all treeview nodes unselectable to prevent selection in editor being lost
    function makeUnselectable(element) {
        var nodes = element.getElementsByTagName("*");
        for (var index = 0; index < nodes.length; index++) {
            var elem = nodes[index];
            elem.setAttribute("unselectable", "on");
        }
    }

    //Create and display an overlay to prevent the editor content area from capturing mouse events
    var shimId = null;
    function setOverlayVisible(toShow) {
        if (!shimId) {
            var div = document.createElement("DIV");
            document.body.appendChild(div);
            shimId = new Telerik.Web.UI.ModalExtender(div);
        }

        if (toShow) shimId.show();
        else shimId.hide();
    }


    //Check if the image is over the editor or not
    function isMouseOverEditor(editor, events) {
        var editorFrame = editor.get_contentAreaElement();
        var editorRect = $telerik.getBounds(editorFrame);

        var mouseX = events.clientX;
        var mouseY = events.clientY;

        if (mouseX < (editorRect.x + editorRect.width) &&
         mouseX > editorRect.x &&
            mouseY < (editorRect.y + editorRect.height) &&
         mouseY > editorRect.y) {
            return true;
        }
        return false;
    }
</script>

    <telerik:RadListBox ID="RadListBox1" runat="server" Width="200px" Height="200px"
         AllowTransfer="true" AllowReorder="true" AutoPostBackOnReorder="true" EnableDragAndDrop="true"
         OnClientDragging="OnClientNodeDragging"
         OnClientDropping="OnClientNodeDropping"
         OnClientDragStart="OnClientNodeDragStart"
         >
        <Items>
            <telerik:RadListBoxItem Text="Argentina" />
            <telerik:RadListBoxItem Text="Australia" />
            <telerik:RadListBoxItem Text="Brazil" />
            <telerik:RadListBoxItem Text="Canada" />
            <telerik:RadListBoxItem Text="Chile" />
            <telerik:RadListBoxItem Text="China" />
            <telerik:RadListBoxItem Text="Egypt" />
            <telerik:RadListBoxItem Text="England" />
            <telerik:RadListBoxItem Text="France" />
            <telerik:RadListBoxItem Text="Germany" />
            <telerik:RadListBoxItem Text="India" />
            <telerik:RadListBoxItem Text="Indonesia" />
            <telerik:RadListBoxItem Text="Kenya" />
            <telerik:RadListBoxItem Text="Mexico" />
            <telerik:RadListBoxItem Text="New Zealand" />
            <telerik:RadListBoxItem Text="South Africa" />
        </Items>
    </telerik:RadListBox>

You can download a sample project from here.

The drag icon can be changed from this code:

 document.body.style.cursor = "no-drop"; 

The available in CSS cursors are listed in this article: http://www.echoecho.com/csscursors.htm.

Best regards,
Rumen
the Telerik team