jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

通过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;