Why dataTransfer.clearData doesn't work?

Question

{Code...} After calling e.dataTransfer.clearData() in the drop function, executing getData("Text") will also return the value in setData(), so how to use clearData()? After the drop function is executed, the data saved by dataTransfer.setData() will be automatically deleted...

滿天的星座 · Answer

There is no problem with my output. DataTransfer.clearData() can only be used in the dragstart event.


测试数据

var draggable = document.getElementById('source');

draggable.addEventListener('dragstart', drop);
function drop (e) {  
  e.dataTransfer.setData("Text",e.target.id);
  // 输出id:source
  alert('id:' + e.dataTransfer.getData("Text"));
  e.dataTransfer.clearData();
  // 输出id:
  alert('id:' + e.dataTransfer.getData("Text"));
}

阿神 · Answer

clearData() can only be used in the dragStart function. Calling clearData() in the drop function is useless and unnecessary, because the data saved by setData() is created when the drag starts, and it is not used when the drag is dropped. That is, when dragging ends, the data saved by setData() will be destroyed.