通過jquery可以很容易實現CP端的拖拽。但是在移動端卻不好用了。于是我自己寫了一個在移動端的拖拽demo，主要用到的事件是觸摸事件（touchstart，touchmove和touchend）。
這個demo實現的功能是：可以拖拽的元素（在這里是圖片）位于列表中，這些元素可以被拖到指定區域，到達指定區域（控制臺）后，元素被插入控制臺后，原來的拖動元素返回原位置，新的元素依然可以在控制臺中拖動，也能拖出控制臺。
在這個demo中一個用三個模塊，分別為ajax模塊，drag模塊，position模塊。ajax模塊用于實現ajax請求（所以的圖片資源是通過ajax請求得到的），drag模塊用于實現元素拖拽，position模塊用于實現元素位置的操作（如位置初始化，復原，移除）。demo的入口文件是indx.js和前面三個模塊文件保存在同一個文件夾中。編碼完成后通過webpack打包。開發代碼位于app文件夾中，打包后的代碼位于build文件夾中。
一.觸摸事件的介紹
觸摸事件有三個，分別是touchstart，touchmove和touchend。touchstart事件在手指觸摸屏幕時觸發。touchmove當手指在屏幕上滑動時連續觸發。在這個事件發生期間取消它的默認，可以組織頁面滾動。touchend在手指從屏幕上離開時觸發。這三個觸摸事件的事件對象除了提供了鼠標事件的常見屬性，還包含了下面三個屬性：
touches：表示當前跟蹤的觸摸操作的touch對象的數組。
targetTouches：特定于事件目標的Touch對象的數組。
changeTouches：表示自上次觸摸以來發生了什么改變的Touch對象的數組。
在這個案例中需要得到觸摸點相對視口的位置，我使用的是event.targetTouches[0].clientX和event.targetTouches[0].clientY
二.ajax模塊的代碼
var $ = require('jquery');var ajax = {//得到可拖拽圖片的初始列表getInitImg:function(parent){var num = 50;$.ajax({type:"GET",async:false,//這里使用同步加載，因為要讓圖片加載完成后才能做其他操作url:'/Home/picwall/index',success:function(result){if(result.status == 1) {$.each(result.data, function (index,item) {var src = item.pic_src;var width = parseInt(item.width);var height = parseInt(item.height);var ratio = num / height;var img = $('').attr("src",src).height(num).width(parseInt(width * ratio));parent.append(img);});}},dataType:'json'});}};module.exports = ajax;//將ajax模塊暴露出來三.position模塊的代碼
var $ = require('jquery');var position = {//初始化位置，gap是一個表示元素間距的對象init:function(parent,gap){var dragElem = parent.children();//確保父元素是相對定位if(parent.css('position') !== "relative"){parent.css('position','relative');}parent.css({'width':"100%",'z-index':'10'});//當前列表內容的寬度var ListWidth = 0;//位于第幾列var j = 0;dragElem.each(function(index,elem){var curEle = $(elem);//設置元素的初始位置curEle.css({position:"absolute",top:gap.Y,left:ListWidth + gap.X});//為每個元素添加一個唯一的標識，在恢復初始位置時有用curEle.attr('index',index);//將元素的初始位置保存起來position.coord.push({X:ListWidth + gap.X,Y:gap.Y});j++;//設置父元素的高度parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y);ListWidth = curEle.offset().left + curEle.width();});},//將子元素插入到父元素中addTo:function(child,parent,target){//父元素在視口的坐標var parentPos = {X:parent.offset().left,Y:parent.offset().top};//目標位置相對于視口的坐標var targetPos = {X:target.offset().left,Y:target.offset().top};//確保父元素是相對定位if(parent.css('position') !== "relative"){parent.css({'position':'relative'});}parent.css({'z-index':'12'});//將子元素插入父元素中parent.append(child);//確定子元素在父元素中的位置并且保證子元素的大小不變child.css({ position:absolute,top:targetPos.Y - parentPos.Y,left:targetPos.X - parentPos.X,width:target.width(),height:target.height()});},//將元素恢復到原來的位置restore:function(elem){//獲得元素的標識var index = parseInt( elem.attr('index') );elem.css({top:position.coord[index].Y,left:position.coord[index].X});},//拖拽元素的初始坐標coord:[],//判斷元素A是否在元素B的范圍內isRang:function(control,dragListPar,$target){var isSituate = undefined;if(control.offset().top > dragListPar.offset().top){isSituate = $target.offset().top > control.offset().top&& $target.offset().left > control.offset().left&& ($target.offset().left + $target.width()) < (control.offset().left + control.width());}else{isSituate = ($target.offset().top + $target.height())<(control.offset().top + control.height())&& $target.offset().top > control.offset().top&& $target.offset().left > control.offset().left&& ($target.offset().left + $target.width()) < (control.offset().left + control.width());}return isSituate;}};module.exports = position;四.drag模塊的代碼
var $ = require('jquery');var position = require('./position.js');var drag = {//拖拽元素的父元素的iddragParen:undefined,//操作臺的id值control:undefined,//移動塊相對視口的位置position:{X:undefined,Y:undefined},//觸摸點相對視口的位置，在滑動過程中會不斷更新touchPos:{X:undefined,Y:undefined},//開始觸摸時觸摸點相對視口的位置startTouchPos:{X:undefined,Y:undefined},//觸摸點相對于移動塊的位置touchOffsetPos:{X:undefined,Y:undefined},//獲取拖拽元素父元素id和控制臺的ID的值setID:function(dragList,control){this.dragParent = dragList;this.control = control;},touchStart:function(e){var target = e.target;//阻止冒泡e.stopPropagation();//阻止瀏覽器默認的縮放和滾動e.preventDefault();var $target = $(target);//手指剛觸摸到屏幕上時，觸摸點的位置drag.startTouchPos.X = e.targetTouches[0].clientX;drag.startTouchPos.Y = e.targetTouches[0].clientY;//觸摸元素相對視口的位置drag.position.X = $target.offset().left;drag.position.Y = $target.offset().top;//觸摸點相對于視口的位置，滑動過程中不斷更新drag.touchPos.X = e.targetTouches[0].clientX;drag.touchPos.Y = e.targetTouches[0].clientY;//觸摸點相對于觸摸元素的位置drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X;drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y;//給目標元素綁定touchMove事件$target.unbind('touchmove').on('touchmove',drag.touchMove);},touchMove:function(e){var target = e.target;//阻止冒泡e.stopPropagation();//阻止瀏覽器默認的縮放和滾動e.preventDefault();var $target = $(target);//獲得觸摸點的位置drag.touchPos.X = e.targetTouches[0].clientX;drag.touchPos.Y = e.targetTouches[0].clientY;//修改移動塊的位置$target.offset({top: drag.touchPos.Y - drag.touchOffsetPos.Y,left: drag.touchPos.X - drag.touchOffsetPos.X});//給移動元素綁定touchend事件$target.unbind('touchend').on('touchend',drag.touchEnd);},touchEnd:function(e) {var target = e.target;//阻止冒泡e.stopPropagation();//阻止瀏覽器默認的縮放和滾動e.preventDefault();var $target = $(target);var parent = $target.parent();//得到控制臺和拖動元素列表的父元素var control = $("#" + drag.control);var dragListPar = $('#' + drag.dragParent);//拖動元素是否位于控制臺var sitControl = position.isRang(control, dragListPar, $target);//拖動結束后，如果拖拽元素的父元素是拖拽列表if (parent.attr('id') === drag.dragParent) {//如果元素位于控制臺if (sitControl) {var dragChild = $target.clone();//為克隆出的元素綁定touchstart事件dragChild.unbind('touchstart').on('touchstart',drag.touchStart);//將克隆出的元素插入到控制臺position.addTo(dragChild, control, $target);}//將原來的觸摸元素恢復到初始位置position.restore($target);}// 拖拽結束后，如果拖拽元素的父元素是控制臺，并且元素拖出了控制臺if (parent.attr('id') === drag.control && !sitControl) {$target.remove();}}};module.exports = drag;五.入口文件index.js的代碼
require('../css/base.css');require('../css/drag.css');var $ = require('jquery');var drag = require('./drag.js');var position = require('./position.js');var ajax = require('./ajax.js');var dragList = $('#dragList');//可拖拽元素的水平，豎直間距var gap = {X:20,Y:10};//通過ajax獲取可拖拽的元素的列表ajax.getInitImg(dragList);//初始化可拖拽元素的位置position.init(dragList,gap);//設置控制臺的高度。控制臺的高度為屏幕的高度減去拖拽列表的蓋度var control = $('#control');control.height( $(window).height() - dragList.height() );//給每個拖動元素綁定touchstart事件var dragElem = dragList.children();dragElem.each(function(index,elem){$(elem).unbind('touchstart').on('touchstart',drag.touchStart);});//拖拽元素的父元素的id值為dragList,操作臺的id值為controldrag.setID('dragList','control');六.webpack打包
上面用到了模塊化編程的思想，將不同的功能實現寫在了不同的模塊中，需要用到什么功能就可以用require（）去引入，但是瀏覽器并沒有require方法的定義。所以上面的代碼并不能直接在瀏覽器中運行，需要先打包。如果你對webpack還不熟悉你可以去查看這篇文章，webpack的配置文件如下：
var autoHtml = require('html-webpack-plugin');var webpack = require('webpack');var extractTextWebpack = require('extract-text-webpack-plugin');// 這個插件可以將css文件分離出來，為css文件位于單獨的文件中module.exports = {entry:{'index':'./app/js/index.js','jquery':['jquery']},output:{path:'./build/',filename:'js/[name].js'},module:{loaders:[{test://.css/,loader:extractTextWebpack.extract('style','css')}]},plugins:[new extractTextWebpack('css/[name].css',{allChunks:true}),new webpack.optimize.CommonsChunkPlugin({name:'jquery',filename:'js/jquery.js'}),new autoHtml({title:"拖拽",filename:"drag.html",template:'./app/darg.html',inject:true})]};以上所述是小編給大家介紹的jQuery 移動端拖拽（模塊化開發，觸摸事件，webpack），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
