目前我正在處理一個場景,我需要在拖動開始後更改附加到拖動元素的數據。基本上拖放區域是輸入字段或textareas,所以我想使用本機event.dataTransfer.setData
,因爲本地拖放可以使光標隨鼠標移動。可以在拖動開始後異步設置event.dataTransfer嗎?
如果我只是在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
引用,則不是同一個對象。現在我不知道實際發生了什麼。
所以我的問題是
- 是否可以拖動啓動後與本機API(不使用
event.preventDefault
)來設置數據dataTransfer
? - 如果第一個問題的答案是NO,我可以嘗試什麼樣的解決方法? 我可以想到如何保存和獲取數據進行傳輸。我主要關心的是,如果在
drop
上使用event.preventDefault()
,那麼使用鼠標就像本地丟棄一樣獲得脫字符號並不容易。
什麼是設置'event.dataTransfer'異步的目的是什麼?你想達到什麼目的? – guest271314