从MDN文档中,我可以阅读:


https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

但是...为什么当我将函数附加到“drag”事件时浏览器会忽略我的函数,而当我将其赋予“dragstart”事件时却可以正常运行吗?
根据定义,我假设它们两者都执行相同的操作(?)
function itemDrag(e) {
e.dataTransfer.setData("text", e.target.id);
}


document.getElementById("try1").addEventListener("dragstart",function(){
    itemDrag(event);
});

最佳答案



因此 dragstart 应该被触发一次, drag 应该被连续触发。

这来自MDN页面。

https://developer.mozilla.org/en-US/docs/Web/Events/drag

https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

例:

let continu = 0;

document.addEventListener("dragstart", function( event ) {

     console.log('start');

}, false);

document.addEventListener("drag", function( event ) {

  if(continu < 5){
     console.log('continu');
  }

  continu ++;

}, false);
<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>



拖动相关事件:
  • drag
  • dragstart
  • dragend
  • dragover
  • dragenter
  • dragleave
  • dragexit
  • drop
  • 09-25 13:56