如何从contenteditable获取“插入符号位置”？

Question

如果从contenteditable中拖动元素，浏览器通常会显示如下图所示的“中间插入符号”：

我正在寻找一个简单可靠的解决方案，通过发送元素ID作为通过拖放传输数据来从Contentedable内拖动元素。然后，在ondrop方法中，我打算将draggable放在这个中间插入符号当前所在的确切位置。

问题是：我能从所有的浏览器中获得这些信息吗？

我确实有一个基地（JSFiddle），但目前对我来说远没有用。

PS：我没有使用jQuery或任何其他库。

Answer 1

查看document.caretRangeFromPoint和e.range父，e.rangeOffset。

这是一个演示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>