Drag and Drop in combine with jQuery UI Draggable and Droppable

[Erick]

I am playing with jQuery Draggable and Droppable in combine with Telerik Editor. There are some DIV containers which i want to drag and drop into the editor at the mouse position. All DIV's are configured with jQuery Draggable and i can drop the content with pasteHtml() function but fail to drop it to the mouse position instead of cursor position in the editor.

When you select a normal text outside the editor and drag/drop it into the editor (works fine with Chrome), you will see the cursor into the editor will move with the mouse position. This behaviour is correct. But with a draggable DIV, there is no cursor in the editor and the drop will be at very beginning of at end of the document. I want the editor to be focussed and moving with the mouse cursor. 

I have read other threads but didn't found a solution.

You an idea?

[Ianko]

Hello,

The described behavior is not something that could be controlled by the RadEditor.

Firstly, when dragging images, or some text elements into the content area of the editor, a cursor appears because the browser editable functionality allows it. The cursor position, where the dragged element is hovered is rendered by the browser and the RadEditor control does not have control to it.

Also, when the jQerry draggable is used, the elements are rendered as block elements and thus the native browser engine does not recognize them as elements that can be dropped into a content editable area. By that a cursor is not rendered, and by dropping the content is inserted in the initial cursor position of the editor.

You can examine the same behavior even with a simple DOM element like this one:

<div contenteditable="true" style="width:500px; height:300px; border:1px solid red;">
    some text
</div>

Regards,
Ianko
Telerik

 

 

[Erick]

Ok thanks.

Jelle