开始拖拽一个带有 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>