javascript - 如何在拖动 block 元素时显示光标位置，就像拖动 img 和选定的文本一样？

我在 contentEditable body 元素中有一个可拖动的 block 元素，如下所示:

<body contentEditable='true'><p draggable id='drag'>some text here</p><p id='text'>another text</p></body>

我想拖动p元素转化为p[id=text] ，就像拖动img元素，当我们拖动可拖动元素时，会在 p[id=text] 期间显示一个光标文本(在本例中)指示可拖动元素应插入的位置。

所以我的主要问题是:如何在将 block 元素拖动到某些文本中时显示光标，就像拖动 img元素？有没有可能实现？

最佳答案

您必须将 dragEvent.dataTransfer 设置为元素的 textContent 并使用非标准 user-select CSS 属性来避免选择文本而不是拖动元素。此外，对于 chrome，您必须将可拖动元素的 contenteditable 属性设置为 false。

document.querySelector('p').addEventListener('dragstart', function(e) {
  e.dataTransfer.setData("text/plain", this.textContent);
}, false);

#drag{
    -webkit-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
}

<body contentEditable='true'>
  <p contenteditable="false" draggable="true" id='drag'>some text here</p>
  <p id='text'>another text</p>
</body>

关于javascript - 如何在拖动 block 元素时显示光标位置，就像拖动 img 和选定的文本一样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32062236/