首頁(yè) 猿問(wèn) 利用HTML5 的拖放Drag...

利用HTML5 的拖放Drag 相關(guān)的API，怎么實(shí)現(xiàn)拖動(dòng)的對(duì)象離開(kāi)原來(lái)的位置

CSS3 Html5 JavaScript

30秒到達(dá)戰(zhàn)場(chǎng) 2019-04-20 14:15:02

現(xiàn)在有個(gè)需求就是拖動(dòng)div交換位置。怎么實(shí)現(xiàn)比如拖動(dòng)盒子01。那么盒子01就會(huì)離開(kāi)原來(lái)的位置，但是利用HTML5 的拖放Drag相關(guān)的API，根本沒(méi)有這樣的方法。還是說(shuō)這個(gè)需要用到鼠標(biāo)按下（mousedown事件）、移動(dòng)時(shí)（mousemove事件）、松開(kāi)時(shí)（mouseup事件），配合H5的拖拽API dragstart dragenter dragover drop 才能實(shí)現(xiàn)這個(gè)效果。

查看完整描述

1 回答

米琪卡哇伊

TA貢獻(xiàn)1998條經(jīng)驗(yàn) 獲得超6個(gè)贊

僅提供思路。

H5的原生拖放只是允許監(jiān)聽(tīng)鼠標(biāo)拖拽事件，并允許傳遞自定義數(shù)據(jù)。具體實(shí)現(xiàn)什么行為，需要自己寫(xiě)。
如果用原生拖放，自己實(shí)現(xiàn)的部分，邏輯類似下面這句話:

child_1.insertBefore(child_2);

child_1是dragstart時(shí)候得到的，而child_2的獲取需要在drop時(shí)通過(guò)相對(duì)位置計(jì)算得出來(lái)的，只有這部分在整個(gè)實(shí)現(xiàn)中比較繁瑣。

原生拖放在實(shí)現(xiàn)這種拖拽移動(dòng)DOM的表現(xiàn)上，體驗(yàn)不如用監(jiān)聽(tīng)鼠標(biāo)事件來(lái)得好。原生拖放在拖拽過(guò)程中沒(méi)辦法實(shí)現(xiàn)被拖拽的元素跟隨鼠標(biāo)移動(dòng)的效果。但用鼠標(biāo)事件實(shí)現(xiàn)起來(lái)相對(duì)更復(fù)雜一些。

鼠標(biāo)拖拽實(shí)現(xiàn)基于absolute position布局。每個(gè)子元素監(jiān)聽(tīng)mousedown事件，父元素監(jiān)聽(tīng)mouseover和mouseup事件。在mousedown時(shí)記錄被拖拽的元素位置信息和鼠標(biāo)位置信息。在mouseover中根據(jù)鼠標(biāo)位置相對(duì)變化不停計(jì)算被拖拽元素最新的位置，并改變其位置，實(shí)現(xiàn)被拖拽元素跟著鼠標(biāo)走的效果。并且可以同時(shí)計(jì)算如果此刻松開(kāi)鼠標(biāo)，這個(gè)元素應(yīng)該被放置到什么位置，利用這個(gè)數(shù)據(jù)，不僅可以在mouseup時(shí)直接調(diào)整元素位置，還可以在mouseover過(guò)程中調(diào)整其他元素位置來(lái)實(shí)現(xiàn)移動(dòng)提示效果。

反對(duì) 回復(fù) 2019-05-19