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

Question

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

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

问题是：我能够从所有浏览器获取这些信息吗？

我确实有一个基础（JSFiddle），但目前这对我来说还没有什么用处。

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

Answer 1

看看document.caretRangeFromPoint和e.rangeParent, 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>