如何在 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)

}