通過jquery可以很容易實(shí)現(xiàn)CP端的拖拽。但是在移動(dòng)端卻不好用了。于是我自己寫了一個(gè)在移動(dòng)端的拖拽demo，主要用到的事件是觸摸事件（touchstart，touchmove和touchend）。
這個(gè)demo實(shí)現(xiàn)的功能是：可以拖拽的元素（在這里是圖片）位于列表中，這些元素可以被拖到指定區(qū)域，到達(dá)指定區(qū)域（控制臺(tái)）后，元素被插入控制臺(tái)后，原來的拖動(dòng)元素返回原位置，新的元素依然可以在控制臺(tái)中拖動(dòng)，也能拖出控制臺(tái)。
在這個(gè)demo中一個(gè)用三個(gè)模塊，分別為ajax模塊，drag模塊，position模塊。ajax模塊用于實(shí)現(xiàn)ajax請求（所以的圖片資源是通過ajax請求得到的），drag模塊用于實(shí)現(xiàn)元素拖拽，position模塊用于實(shí)現(xiàn)元素位置的操作（如位置初始化，復(fù)原，移除）。demo的入口文件是indx.js和前面三個(gè)模塊文件保存在同一個(gè)文件夾中。編碼完成后通過webpack打包。開發(fā)代碼位于app文件夾中，打包后的代碼位于build文件夾中。
一.觸摸事件的介紹
觸摸事件有三個(gè)，分別是touchstart，touchmove和touchend。touchstart事件在手指觸摸屏幕時(shí)觸發(fā)。touchmove當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。在這個(gè)事件發(fā)生期間取消它的默認(rèn)，可以組織頁面滾動(dòng)。touchend在手指從屏幕上離開時(shí)觸發(fā)。這三個(gè)觸摸事件的事件對象除了提供了鼠標(biāo)事件的常見屬性，還包含了下面三個(gè)屬性：
touches：表示當(dāng)前跟蹤的觸摸操作的touch對象的數(shù)組。
targetTouches：特定于事件目標(biāo)的Touch對象的數(shù)組。
changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(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)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式