移動端拖拽（模塊化開發(fā)，觸摸事件，webpack）

通過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)元素位置的操作（如位置初始化，復(fù)原，移除）。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ù)組。

在這個案例中需要得到觸摸點相對視口的位置，我使用的是event.targetTouches[0].clientX和event.targetTouches[0].clientY

二.ajax模塊的代碼