2016-08-06 130 views
6

目前我正在處理一個場景,我需要在拖動開始後更改附加到拖動元素的數據。基本上拖放區域是輸入字段或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的問題。一個非常奇怪的事情是,如果我嘗試比較dragstartdrop事件中的兩個dataTransfer引用,則不是同一個對象。現在我不知道實際發生了什麼。

所以我的問題是

  1. 是否可以拖動啓動後與本機API(不使用event.preventDefault)來設置數據dataTransfer
  2. 如果第一個問題的答案是NO,我可以嘗試什麼樣的解決方法? 我可以想到如何保存和獲取數據進行傳輸。我主要關心的是,如果在drop上使用event.preventDefault(),那麼使用鼠標就像本地丟棄一樣獲得脫字符號並不容易。
+0

什麼是設置'event.dataTransfer'異步的目的是什麼?你想達到什麼目的? – guest271314

回答

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

+0

感謝您的回答。將它保存在全局對象中是一個好主意。但我想要實現的是將保存的文本插入到textarea或光標位置的內容可編輯div(跟蹤鼠標位置,如本機)。因此,在給第一個問題提供NO之後,解決方法的關鍵問題是如何使用drop上的全局對象將文本插入到正確的位置。 – MMhunter

+0

你可以寫javascript來爲你做。 –

+0

嗯,那是真的。但如果這可以輕鬆完成,我不會這麼掙扎。我也找不到任何圖書館幫助我實現這一目標。所以我仍然面臨這個問題,並找不到解決方案與您目前的答案。我需要用戶界面進行更新。 – MMhunter

相關問題