Drop image to context sensitive in Chrome cursor

Question

In Firefox, if I drag an image into the content field from the desktop, it will be embedded in base64 at the HIGHLIGHTED cursor position.

JSFiddle: http://jsfiddle.net/zupa/YrwsS/

Now in Chrome, the image is opened by the browser (pageload, try the same fiddle).

Thanks to HTML5 you can catch the drop event and catch the image with it. But if I stop the default behavior of browsers, I am stuck, not knowing where the user wants to reset it.

Can you suggest a workaround?

Answer 1

If you can get the coordinates of the place of the fall (which I suppose should be possible), you can do it as follows (unchecked). I assume that you have the coordinates of the departure point relative to the viewport as x and y variables, and the lost image as img variable:

Demo: http://jsfiddle.net/KZqNj/

the code:

 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); range.collapse(); range.insertNode(img); } // Next, the WebKit way else if (document.caretRangeFromPoint) { range = document.caretRangeFromPoint(x, y); range.insertNode(img); } // 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 the browsers of the latest versions of WebKit, Opera and Mozilla, although only Firefox has an implementation of document.caretPositionFromPoint() .

Literature:

• http://dev.w3.org/csswg/cssom-view/#dom-document-caretpositionfrompoint