前段時間寫了一個簡單的div拖動效果，不料昨天項目上正好需要一個相差不多的需求，就正好用上了，但是在移動端的時候卻碰到了問題，拖動時候用到的三個事件：mousedown、mousemove、mouseup在移動端都不起任何作用。畢竟移動端是沒有鼠標(biāo)的，查資料后發(fā)現(xiàn)，在移動端與之相對應(yīng)的分別是：touchstart、touchmove、touchend事件。還有一點(diǎn)要注意的是在PC端獲取當(dāng)前鼠標(biāo)的坐標(biāo)是：event.clientX和event.clientY，在移動端獲取坐標(biāo)位置則是：event.touches[0].clientX和event.touches[0].clientY。

下面就來說說怎么實(shí)現(xiàn)這個效果吧，先看一下效果： 
PC端 
photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

移動端 
photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

先來分析一個拖動的流程，以PC端為例，首先是鼠標(biāo)按下（mousedown事件），然后移動（mousemove事件），最后釋放鼠標(biāo)（mouseup事件），首先要設(shè)置一個變量記錄鼠標(biāo)是否按下，在鼠標(biāo)按下的時候，我們做一個標(biāo)記，然后需要記錄一下鼠標(biāo)當(dāng)前的坐標(biāo)，還有這個div當(dāng)前的偏移量，當(dāng)鼠標(biāo)開始移動的時候，記錄下鼠標(biāo)當(dāng)前的坐標(biāo)，用鼠標(biāo)當(dāng)前的坐標(biāo)減去鼠標(biāo)按下時的坐標(biāo)再加上鼠標(biāo)按下時div的偏移量就是現(xiàn)在div距離父輩元素的距離，當(dāng)鼠標(biāo)釋放的時候?qū)?biāo)記改為鼠標(biāo)已經(jīng)釋放。

下面來看一下代碼：

        		
網(wǎng)友評論