如何從 contenteditable 獲得“刪除插入符號位置”？

Question

如果從contenteditable拖動一個元素，瀏覽器通常會顯示這樣一個“中間插入符號”，如下圖所示：

我正在尋找一種簡單可靠的解決方案，通過拖放將元素 ID 作為傳輸數據發送，從而從contenteditable拖動元素。 然后，在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>