从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