JS中拖拽時用到的dataTransfer對象

在進行拖放操作的時候，dataTransfer對象可以用來保存被拖動的數據。它可以保存一項或多項數據、一種或多數數據類型。通谷一點講，就是可以通過它來傳輸被拖動的數據，以便在拖拽結束的時候，對數據進行其他的操作。

在項目拖動的開始事件(ondragstart)的時候，可以對dataTransfer進行設值操作(setData)。

document.getElementById('source').ondragstart = function (event) {
    event.dataTransfer.setData('some-key', 'some-value');
};

在項目拖動結束的時候，可以獲取dataTransfer對象裏的值。

document.getElementById('target').ondrop = function(event){
    event.preventDefault(); // 拖動的默認處理方式是在新窗口打開，所以阻止其執行
    let value = event.dataTransfer.getData('some-key');
    // some-value
}

在其它的事件(如ondragover、ondragleave等），是無法獲取dataTransfer裏面的值了。這是由於W3C要求對dataTransfer裏的值進行保護[參考]。因此，如果需要在這些事件裏獲取數據，只能通過一個全局變量等其它方式來實現了。

 

//這裏存的數據可以是，拖拽開始自身的dom結構，也可以是dom結構自身的數據，id，class等

當結束拖拽的時候，如果需要操作這部分數據，則就用這種存取的方式