CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropcontenteditable
Rick Moss
Rick Moss

Reputation: 926

jqueryui drag image into a contentEditable div and drop it at that position within the text

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

Upvotes: 0

Views: 1625

Answers (1)

Brilliand
Brilliand

Reputation: 13714

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.

Upvotes: 1

Related Questions