Drag and Drop in combine with jQuery UI Draggable and Droppable

3 posts, 0 answers
  1. Erick
    Erick avatar
    81 posts
    Member since:
    Feb 2010

    Posted 08 Dec 2014 Link to this post

    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. Ianko
    Ianko avatar
    1949 posts

    Posted 11 Dec 2014 Link to this post


    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


    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.

  3. Erick
    Erick avatar
    81 posts
    Member since:
    Feb 2010

    Posted 19 Jan 2015 Link to this post

    Ok thanks.

Back to Top