开始拖动具有draggable 属性的DOM 元素后，是否可以停止拖动并退出拖放？

Question

拖动开始后，我必须停止拖动异步。 我可以在拖动事件中添加一些东西来取消拖动吗？

 document.querySelector('#drag-elem').addEventListener('drag', function(e){ // Stop the drag e.preventDefault(); }) document.querySelector('#drag-elem').addEventListener('dragstart', function(e){ console.log('dragstart') })

 <div draggable='true' id='drag-elem'>Draggable</div>

Answer 1

您可以使用dataIsValid标志来决定是否允许在ondragover和ondrop事件处理程序中放置。 举个例子，数据是0到1之间的随机数，大于0.5就认为有效，异步验证需要整整一秒。 尝试将 Source 拖到 Target 上并等待至少一秒钟，然后再松开鼠标左键。

 let dataIsValid = false; function validateData(data) { dataIsValid = data.value > 0.5; console.log(`Data is ${dataIsValid? "valid": "invalid"}: ${data.value.toFixed(2)}`); } function onDragStart(event) { // Create data to be transferred const data = { value: Math.random() }; event.dataTransfer.setData("text", JSON.stringify(data)); event.target.textContent = data.value.toFixed(2); // Start asynchronous validation dataIsValid = false; setTimeout(() => validateData(data), 1000); } function onDragOver(event) { if (dataIsValid) { event.preventDefault(); } } function onDrop(event) { if (dataIsValid) { event.preventDefault(); const data = JSON.parse(event.dataTransfer.getData("text")); event.target.textContent = data.value.toFixed(2); } }

 div.circle { display: inline-block; width: 100px; height: 100px; border-radius: 50px; text-align: center; vertical-align: middle; line-height: 100px; font-family: Arial, Helvetica, sans-serif; } div#source { background: coral; } div#target { background: lightblue; }

 <div id="source" class="circle" draggable="true" ondragstart="onDragStart(event)">Source</div> <div id="target" class="circle" ondragover="onDragOver(event)" ondrop="onDrop(event)">Target</div>