问题描述
我在contentEditable主体元素中有一个可拖动的块元素，如下所示:
I got a draggable block element in contentEditable body element like this:
<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]文本中会显示一个光标(在这种情况下)以指示位置可拖动元素应插入的位置.
And I want to drag p element into p[id=text], just as drag img element, when we dragging draggable element there would be a cursor showing during p[id=text] text (in this case) to indicate the position where draggable element should insert in.
所以我的主要问题是:像拖动img元素一样，如何在将块元素拖动到某些文本中时显示光标?有可能实现这一目标吗?
So my main question is: How to show cursor when dragging block element into some text just like drag img element? Is there any possibility to achieve that?
推荐答案
您必须将dragEvent.dataTransfer设置为元素的textContent，并使用Non-standard user-select CSS属性以避免选择文本而不是拖动文本.元素.另外，对于chrome，您必须将可拖动元素的contenteditable属性设置为false.
You have to set the dragEvent.dataTransfer to the textContent of your element and use the Non-standard user-select CSS property to avoid selecting text instead of dragging the element. Also, for chrome, you have to set your draggable element's contenteditable property to 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>这篇关于像拖动img和选定的文本一样，如何在拖动块元素时显示光标位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！