如何从 contenteditable 获得“删除插入符号位置”？

Question

If one drags an element from within a contenteditable the browser usually shows such an "intermediate caret" as can be seen in the image below:

I am looking for a simple and reliable solution to drag an element from within a contenteditable by sending the elements ID as transfer data via drag and drop. Then, in the ondrop method I intend to place the draggable at the exact position where this "intermediate caret" is currently at.

The question is: Will I be able to get this information from all the browsers?

I do have a base ( JSFiddle ) but that's far from being useful for me at the moment.

PS: I am not using jQuery or any other libraries.

Answer 1

Check out document.caretRangeFromPoint and e.rangeParent, e.rangeOffset .

Here is a demo https://jsfiddle.net/znghofxt

 function dragElement(e) { e.dataTransfer.setData('text/plain', e.target.id); } function drop(e) { e.preventDefault(); var id = e.dataTransfer.getData("text/plain"); if (document.caretRangeFromPoint) { // edge, chrome, android range = document.caretRangeFromPoint(e.clientX, e.clientY) } else { // firefox var pos = [e.rangeParent, e.rangeOffset] range = document.createRange() range.setStart(...pos); range.setEnd(...pos); } range.insertNode(document.getElementById(id)); }

 .fancy { background-color: #123456; color: white; border-radius: 8px 8px 8px 8px; cursor:pointer; display: inline-block; padding: 20px; } .fancy-img { cursor:pointer; display: inline-block; }

 <div contenteditable="true" ondrop="drop(event)"> More blah about <a id="dragme" href="http://www.google.com" class="fancy" contenteditable="false" ondragstart="dragElement(event)"> :( </a> Sparta! </div>