開始拖動具有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>