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

Drag and Drop in combine with jQuery UI Draggable and Droppable

2 Answers 258 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Erick
Top achievements
Rank 2
Erick asked on 08 Dec 2014, 04:30 PM
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?

2 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 11 Dec 2014, 01:51 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Erick
Top achievements
Rank 2
answered on 19 Jan 2015, 02:26 PM
Ok thanks.

Jelle
Tags
Editor
Asked by
Erick
Top achievements
Rank 2
Answers by
Ianko
Telerik team
Erick
Top achievements
Rank 2
Share this question
or