通过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 = { //拖拽元素的父元素的id dragParen: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;