Question

我在contentEditable体元素中有一个可拖动的块元素，如下所示：

<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]文本中显示一个光标（在这种情况下）表示可拖动元素应插入的位置。

所以我的主要问题是：如何在将块元素拖动到某个文本时显示光标，就像拖动img元素一样？是否有可能实现这一目标？

Answer 1

您必须将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>

Answer 2

这是你要求的吗？下面的代码显示了鼠标光标的位置

＆＃13;

$(document).ready(function(){
  $(document).mousemove(function(e){
    $('#printerX').html('X : ' + e.pageX + "px");
    $('#printerY').html('Y : ' + e.pageY + "px");
  });
});

＆＃13;

body
{
  background-color: #E1E7E8;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Move your mouse in the HTML document</h2>
<p id="printerX"></p>
<p id="printerY"></p>

＆＃13;

拖动块元素时如何显示光标位置就像拖动img和所选文本一样？

2 个答案: