Rectangle 27 0

If you can get the co-ordinates of the drop location (which I assume must be possible), you can do it as follows (untested). I'm assuming you've got the co-ordinates of the drop location relative to the viewport as variables x and y and the dropped image as the variable img:

var range;

// Try the standards-based way first
if (document.caretPositionFromPoint) {
    var pos = document.caretPositionFromPoint(x, y);
    range = document.createRange();
    range.setStart(pos.offsetNode, pos.offset);
// Next, the WebKit way
else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(x, y);
// Finally, the IE way
else if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToPoint(x, y);
    var spanId = "temp_" + ("" + Math.random()).slice(2);
    range.pasteHTML('<span id="' + spanId + '">&nbsp;</span>');
    var span = document.getElementById(spanId);
    span.parentNode.replaceChild(img, span);

This will work in recent-ish WebKit, Opera and Mozilla browsers, although only Firefox has an implementation of document.caretPositionFromPoint().

document.caretRangeFromPoint(x, y)
range.setStart(pos.startContainer, pos.startOffset)

@zupa: Ah, right. That's WebKit's own proprietary method; I thought they'd implemented the standards-based one now as well, but I could be wrong. Glad to help, anyway.

no worries, you pointed me in the right direction, that was all I needed, really!

The code works until IE11 is released. I get an "unspecified error" in range.moveToPoint() in IE 11. Both document.caretRangeFromPoint and document.caretPositionFromPoint are not available in IE11. Any suggestion? Thanks.

@clam: Grr. After the progress made by IE 9 and 10 in eliminating compatibility issues, IE 11 seems to have introduced new problems. I'll look into it.

javascript - Drop image into contenteditable in Chrome to the cursor -...

javascript google-chrome drag-and-drop contenteditable