像拖动img和选定的文本一样,如何在拖动块元素时显示光标位置? [英] How to show cursor position when dragging block element just like drag img and selected text?
问题描述
我在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和选定的文本一样,如何在拖动块元素时显示光标位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!