如何在 div 上拖动文本或在 div 上放置文本时触发事件

Question

想象一下，我有一个从另一个 window 中选择的文本，当我将文本拖放到 div 上时，我将其拖到 div 上，我想触发一个事件并捕获掉落的文字。我知道它在文本框上工作。但是我找不到事件触发。

<div onTextDropped="handleTextDrop()">

</div>

我想实现类似上面的东西，我想获取删除的文本

function dropped(){

  console.log('dropped')

}

<div ondrop="dropped()" onClick="clicked()" style="width: 200px; height: 200px; background-color: red">
  drop text here
</div>

Answer 1

我觉得ondrop事件可以让你满意 https://www.w3schools.com/tags/ref_eventattributes.asp

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "The p element was dropped";
}

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_ondrop

记录选定的文本

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  console.log(data)

}

如何在 div 上拖动文本或在 div 上放置文本时触发事件

How to trigger event when dragged text on a div or dropped a text on a div

html

javascript

textbox

dom-events