0

I have a image that is a jqueryui draggable and a div that is a jqueryui droppable that contains text / html and is contentEditable=true.

I want to be able to drag the image over the contentEditable text and when i drop it i want to be able to drop the image at that text / character position.

I have found many ways to do this if i click or select text in the editable then drag the image in using the selected text range but when i just drag the image and drop it there is no text selected.

How can i set the selected / cursor position in the contentEditable text on drop event ?

anyone help with this ?

thank you Rick

Rick Moss
  • 926
  • 1
  • 17
  • 34
  • I'm not quite clear on what the problem is. – Tim Down Sep 14 '12 at 14:10
  • 1
    hi Tim i have used your code in this http://jsfiddle.net/rmossuk/qLQtK/2/ to get the cursor position when i drop the image onto the contentEditable. But this only works if i first click inside the contentEditable then drag the image into it. What i want to do is not have to click or select text in the contentEditable but just drag the image in and on drop, i want to get the position of my mouse in the text, so that i can then add the image code to that postion in the text. Hope this makes sense ??? Can you help ? thanks a lot – Rick Moss Sep 14 '12 at 14:54
  • This appears to have been answered here: http://stackoverflow.com/questions/3006623/drag-n-drop-on-contenteditable-elements - though I don't like that answer much, and am still looking. – Brilliand Oct 13 '14 at 22:43
  • I've found a more satisfactory answer here: http://stackoverflow.com/questions/14678451/precise-drag-and-drop-within-a-contenteditable – Brilliand Oct 31 '14 at 20:36
  • http://stackoverflow.com/questions/10654262/drop-image-into-contenteditable-in-chrome-to-the-cursor – Tim Down Nov 02 '14 at 19:07

1 Answers1

1

This question has been answered elsewhere on this site: Precise Drag and Drop within a contenteditable

The solution there has code specific to each browser (via feature detection), and currently only works in Chrome and Firefox. For Chrome, a range needs to be computed from the mouse coordinates using document.caretRangeFromPoint. For Firefox, the event object has the rangeParent and rangeOffset properties, which can be used to determine where the caret should be positioned.

document.addEventListener("drop", function(e) {
    var sel = document.getSelection();
    if(document.caretRangeFromPoint) { // Chrome
        var range = document.caretRangeFromPoint(e.clientX,e.clientY);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if(e.rangeParent) { // Firefox
        var range = document.createRange();
        range.setStart(e.rangeParent, e.rangeOffset);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if(sel.rangeCount == 0) { // Default to at least not completely failing
        var range = document.createRange();
        sel.addRange(range);
    }

    // The selection is now in the right place - proceed with whatever the drop should do
});

This code is designed to work with the entire document being editable - for an editable div, you'll need to set the event listener on that div, and modify the fallback case to guarantee that the selection is inside the div.

Community
  • 1
  • 1
Brilliand
  • 13,404
  • 6
  • 46
  • 58