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