通過jquery可以很容易實現(xiàn)CP端的拖拽。但是在移動端卻不好用了。于是我自己寫了一個在移動端的拖拽demo，主要用到的事件是觸摸事件（touchstart，touchmove和touchend）。
這個demo實現(xiàn)的功能是：可以拖拽的元素（在這里是圖片）位于列表中，這些元素可以被拖到指定區(qū)域，到達指定區(qū)域（控制臺）后，元素被插入控制臺后，原來的拖動元素返回原位置，新的元素依然可以在控制臺中拖動，也能拖出控制臺。
在這個demo中一個用三個模塊，分別為ajax模塊，drag模塊，position模塊。ajax模塊用于實現(xiàn)ajax請求（所以的圖片資源是通過ajax請求得到的），drag模塊用于實現(xiàn)元素拖拽，position模塊用于實現(xiàn)元素位置的操作（如位置初始化，復原，移除）。demo的入口文件是indx.js和前面三個模塊文件保存在同一個文件夾中。編碼完成后通過webpack打包。開發(fā)代碼位于app文件夾中，打包后的代碼位于build文件夾中。
一.觸摸事件的介紹
觸摸事件有三個，分別是touchstart，touchmove和touchend。touchstart事件在手指觸摸屏幕時觸發(fā)。touchmove當手指在屏幕上滑動時連續(xù)觸發(fā)。在這個事件發(fā)生期間取消它的默認，可以組織頁面滾動。touchend在手指從屏幕上離開時觸發(fā)。這三個觸摸事件的事件對象除了提供了鼠標事件的常見屬性，還包含了下面三個屬性：
touches：表示當前跟蹤的觸摸操作的touch對象的數(shù)組。
targetTouches：特定于事件目標的Touch對象的數(shù)組。
changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學習是年輕人改變自己的最好方式