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

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

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

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

下面來看一下代碼：

        		
網(wǎng)友評(píng)論