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
1 Answer, 1 is accepted
0
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:
You can see the following video for more information: http://screencast.com/t/WvoKCP2MtE.
All the best,
Rumen
the Telerik team
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