可以在拖动开始后异步设置event.dataTransfer吗？

Question

目前我正在处理一个场景，我需要在拖动开始后更改附加到拖动元素的数据。基本上拖放区域是输入字段或textareas，所以我想使用本机event.dataTransfer.setData，因为本地拖放可​​以使光标随鼠标移动。

如果我只是在dragstart事件的侦听器中同步调用setData()，那么一开始就可以完美工作。

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 document找到dataTransfer对象的官方api描述。但是没有任何关于在拖动开始后异步使用setData的问题。一个非常奇怪的事情是，如果我尝试比较dragstart和drop事件中的两个dataTransfer引用，则不是同一个对象。现在我不知道实际发生了什么。

所以我的问题是

1. 是否可以拖动启动后与本机API（不使用event.preventDefault）来设置数据dataTransfer？
2. 如果第一个问题的答案是NO，我可以尝试什么样的解决方法？ 我可以想到如何保存和获取数据进行传输。我主要关心的是，如果在drop上使用event.preventDefault()，那么使用鼠标就像本地丢弃一样获得脱字符号并不容易。

Answer 1

这是你的答案。 首先，您只能在dragstart事件中设置数据。所以，每次有任何事件启动时，它会设置值，并且无论您怎么设置异步，都不会得到反映。

所以，一件事，你可以做的是有一个全局对象，并设置在牵引起动事件是这样的：

var someObj = { 
    asd : 'something' 
} 

，并在您设置的dragstart回调，像这样：

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

     event.dataTransfer.setData("text/plain", someObj.asd); 
     dataTransferObject = event.dataTransfer; 

     setTimeout(function(){ 
     console.log("attempt to set data asynchonrously after drag start"); 
     //event.dataTransfer.setData("text/plain","asynchonrously set data"); 

     someObj.asd = 'asynchonrously'; 
     //looks like failed, the console output is empty 
     console.log(event.dataTransfer.getData("text/plain")); 
     }, 100) 

    })  

对象是默认的引用类型。 现在，您可以将someObj.asd设置为您想要的任何值，您将看到反映的新值。但是这种方法存在问题，价值将在事件结束后发生跌落意味着反映。

所以，解决你的问题，你可以做的是不设置的dragstart只设置一定的参考价值任何值someObj.asd拖就开始和使用上下降someObj.asd。

这里是什么，我试图解释一个链接：上放置事件 https://plnkr.co/edit/SZhI9lGRI37eEd1nWfhn?p=preview

控制台中看到你会看到反映价值存在。

看不到UI只是去CONSOLE