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

[Solved] Rad Editor Drag and drop

2 Answers 235 Views

Editor

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

2 Answers, 1 is accepted

answered on 17 Apr 2009, 03:48 PM

Hello Mike,

You can use the code below as a base to implement your scenario:

    
            <%@ Page Language="VB" %>   
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>     
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     
        
            <html xmlns="http://www.w3.org/1999/xhtml">     
        
            <head id="Head1" runat="server">     
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />     
        
            <title>RadControls for ASP.NET AJAX</title>     
        
            <style type="text/css">     
        
            .TelerikModalOverlay     
        
            {     
        
                z-index:9999 !important;     
        
            }     
        
            .RadGrid .MyImageClass     
        
            {     
        
                width:50px;     
        
            }     
        
            </style>     
        
            </head>     
        
            <body>     
        
            <form id="form1" runat="server">     
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" />     
        
            <div style="float:left">     
        
                <telerik:RadEditor ID="RadEditor1" runat="server" Width="600px" />     
        
            </div>     
        
            <div style="float:right">     
        
                <telerik:RadGrid     
        
                    ID="RadGrid1"     
        
                    runat="server"     
        
                    Width="400px"     
        
                    DataSourceID="XmlDataSource1">     
        
                    <MasterTableView>     
        
                        <Columns>     
        
                            <telerik:GridTemplateColumn HeaderText="Column Name">     
        
                                <ItemTemplate>     
        
                                    <img class="MyImageClass" src="http://demos.telerik.com/aspnet-ajax/Common/Img/qsfCollageQ1.gif" alt="image" />     
        
                                </ItemTemplate>     
        
                            </telerik:GridTemplateColumn>     
        
                        </Columns>     
        
                    </MasterTableView>     
        
                    <ClientSettings AllowRowsDragDrop="true">     
        
                        <Selecting AllowRowSelect="true" />     
        
                        <ClientEvents OnRowDragStarted="OnRowDragStarted" OnRowDropping="onRowDropping" />     
        
                    </ClientSettings>     
        
                </telerik:RadGrid>     
        
            </div>     
        
            <div style="clear:both"><!-- --></div>     
        
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">     
        
            <script type="text/javascript">     
        
            // <![CDATA[ 
        
            function OnRowDragStarted(sender, args) 
        
            { 
        
                //alert('hallo1'); 
        
                toggleModalDiv(true); 
        
            } 
        
            function onRowDropping(sender, args) 
        
            { 
        
                //alert('hallo2'); 
        
                toggleModalDiv(false); 
        
                var editor = $find("<%= RadEditor1.ClientID %>"); 
        
                var ev = args.get_domEvent(); 
        
                if (isMouseOverEditor(editor, ev)) 
        
                { 
        
                    var stringToPaste = "<table><tr>" + args.get_draggedItems()[0].get_element().innerHTML + "<\/tr><tr></td>Hallo</td></tr><\/table>"; 
        
                    editor.setFocus(); 
        
                    editor.pasteHtml(stringToPaste);  
        
                } 
        
                args.set_cancel(true); 
        
            } 
        
            var modalDiv = null; 
        
            function toggleModalDiv(actionShow) 
        
            { 
        
                //alert('hallo3'); 
        
                if (!modalDiv) 
        
                { 
        
                    var div = document.createElement("DIV"); 
        
                    document.body.appendChild(div); 
        
                    modalDiv = new Telerik.Web.UI.ModalExtender(div); 
        
                } 
        
                if (actionShow) 
        
                    modalDiv.show(); 
        
                else 
        
                    modalDiv.hide(); 
        
            } 
        
            //check whether the image is over the editor or not 
        
            function isMouseOverEditor(editor, events) 
        
            { 
        
                //alert('hallo4'); 
        
                var editorFrame = editor.get_contentAreaElement(); 
        
                var editorRect = $telerik.getBounds(editorFrame); 
        
                var mouseX = events.clientX + document.documentElement.scrollLeft; 
        
                var mouseY = events.clientY + document.documentElement.scrollTop; 
        
                if 
        
                ( 
        
                    mouseX < (editorRect.x + editorRect.width) && 
        
                    mouseX > editorRect.x && 
        
                    mouseY < (editorRect.y + editorRect.height) && 
        
                    mouseY > editorRect.y 
        
                ) 
        
                { 
        
                    return true; 
        
                }             
        
                return false; 
        
            } 
        
            // ]]>     
        
            </script>     
        
            </telerik:RadCodeBlock>     
        
            <asp:XmlDataSource ID="XmlDataSource1" runat="server">     
        
            <Data>     
        
            <nodes>     
        
                <node Column1="value 1" />     
        
                <node Column1="value 2" />     
        
                <node Column1="value 3" />     
        
            </nodes>     
        
            </Data>     
        
            </asp:XmlDataSource>     
        
            </form>     
        
            </body>     
        
            </html>

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 11 Mar 2010, 05:18 PM

This code did the trick.

function isMouseOverEditor(editor, events)
        {
            var editorFrame = editor.get_contentAreaElement();
            var editorRect = $telerik.getBounds(editorFrame);

            var mouseX = 0;
            var mousey = 0;
            if (!events)
                var events = window.event;
            if (events.pageX || events.pageY) {
                mouseX = events.pageX;
                mouseY = events.pageY;
            }
            else if (events.clientX || events.clientY) {
                mouseX = events.clientX + document.body.scrollLeft
           + document.documentElement.scrollLeft;
                mouseY = events.clientY + document.body.scrollTop
           + document.documentElement.scrollTop;
            }

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