Drag and Drop content inside content area of red editor

2 posts, 0 answers
  1. Rashim
    Rashim avatar
    7 posts
    Member since:
    Sep 2011

    Posted 19 Sep 2011 Link to this post

     
    Hi,
     I want to handle the event when user is dragging and dropping content( the content should be div) inside content area, How should i attach event to the OnDragEnd event of the content area's document. Anyone could give me an example with sample project. I am very much trouble with that as i need to confirm it to my CTO so that he might bought this product. Still i am not sure that is it possible to drag and drop content inside Red editor content area. If it is possible then will it be cross browser comfortable. Please advice if possible with sample code and project.

    Thanks,
    Rashim
  2. Rumen
    Admin
    Rumen avatar
    14031 posts

    Posted 21 Sep 2011 Link to this post

    Hi Rashim,

    The drag and drop event in the content area is supported by IE and Firefox only and it occurs when style="position: absolute" is applied to the DIV element. For your convenience I implemented a custom toolbar button InsertDiv which inserts a draggable DIV in the content area:

    Copy Code
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
    <title></title>
    <style type="text/css">
    .reTool .InsertDiv
    {
    background-image: url(http://demos.telerik.com/aspnet-classic/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif);
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
    <telerik:RadEditor ID="RadEditor1" runat="server" ToolsFile="ToolsFile.xml"></telerik:RadEditor>
    <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["InsertDiv"] = function (commandName, editor, args) {
    editor.pasteHtml("<div style=\"position:absolute;width:150px;height:150px;border: 1px solid red;\">sample content</div>");
    };
    </script>
    </form>
    </body>
    </html>

    You can see the following video for more information: http://screencast.com/t/WvoKCP2MtE.


    All the best,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top