前段時(shí)間寫了一個(gè)簡(jiǎn)單的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。
下面就來(lái)說說怎么實(shí)現(xiàn)這個(gè)效果吧，先看一下效果：
PC端 
移動(dòng)端 
先來(lái)分析一個(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)釋放。
下面來(lái)看一下代碼：
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式