小编MMh*_*ter的帖子

目前我正在开发一个场景,我需要在拖动开始后更改附加到拖动元素的数据.基本上,拖放区域是输入字段或textareas,所以我想使用原生,event.dataTransfer.setData因为本机拖放可以使插入符号与鼠标一起移动.

如果我只是setData()在dragstart事件的监听器中同步调用,那么一开始就完美无缺.

dragItem.addEventListener("dragstart",function(event){  
     event.dataTransfer.setData("text/plain","data set in dragstart");
}) 

但是,我的方案可能是数据来自异步回调函数,如AJAX请求.然后我试图调用setData()这个回调函数,但似乎没有成功设置.

dragItem.addEventListener("dragstart",function(event){

  event.dataTransfer.setData("text/plain","data set in dragstart");

  //like a callback in Ajax or resolve function of a promise.
  setTimeout(function(){
    console.log("attempt to set data asynchonrously after drag start");
    event.dataTransfer.setData("text/plain","asynchonrously set data");

    //looks like failed, the console output is empty, even not the original set one
    console.log(event.dataTransfer.getData("text/plain"));
  },200)

}) 

我还尝试更改放置区中的数据dragenter甚至是drop事件侦听器.但是仍然没有运气.

这个plunker展示了我的尝试.

然后我参考了MDN API文档来查找dataTransfer对象的官方api描述.但是没有任何关于像setData拖动启动后异步使用的问题.一个非常奇怪的事情是,如果我尝试比较和事件中的两个dataTransfer引用,它们不是同一个对象.现在我不知道实际发生了什么. …