通過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請(qǐng)求（所以的圖片資源是通過ajax請(qǐng)求得到的），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è)觸摸事件的事件對(duì)象除了提供了鼠標(biāo)事件的常見屬性，還包含了下面三個(gè)屬性：
touches：表示當(dāng)前跟蹤的觸摸操作的touch對(duì)象的數(shù)組。
targetTouches：特定于事件目標(biāo)的Touch對(duì)象的數(shù)組。
changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對(duì)象的數(shù)組。
