移动端拖拽（模块化开发，触摸事件，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模块的代码
1 var $ = require('jquery'); 2 3 var ajax = { 4 //得到可拖拽图片的初始列表 5 getInitImg:function(parent){ 6 var num = 50; 7 $.ajax({ 8 type:"GET", 9 async:false,//这里使用同步加载，因为要让图片加载完成后才能做其他操作 10 url:'/Home/picwall/index', 11 success:function(result){ 12 if(result.status == 1) { 13 $.each(result.data, function (index,item) { 14 var src = item.pic_src; 15 var width = parseInt(item.width); 16 var height = parseInt(item.height); 17 var ratio = num / height; 18 var img = $('<img>').attr("src",src).height(num).width(parseInt(width * ratio)); 19 parent.append(img); 20 }); 21 } 22 }, 23 dataType:'json' 24 }); 25 } 26 }; 27 28 module.exports = ajax;//将ajax模块暴露出来
三.position模块的代码
1 var $ = require('jquery'); 2 3 var position = { 4 //初始化位置，gap是一个表示元素间距的对象 5 init:function(parent,gap){ 6 var dragElem = parent.children(); 7 8 //确保父元素是相对定位 9 if(parent.css('position') !== "relative"){ 10 parent.css('position','relative'); 11 } 12 parent.css({ 13 'width':"100%", 14 'z-index':'10' 15 }); 16 //当前列表内容的宽度 17 var ListWidth = 0; 18 19 //位于第几列 20 var j = 0; 21 dragElem.each(function(index,elem){ 22 var curEle = $(elem); 23 24 //设置元素的初始位置 25 curEle.css({ 26 position:"absolute", 27 top:gap.Y, 28 left:ListWidth + gap.X 29 }); 30 31 //为每个元素添加一个唯一的标识，在恢复初始位置时有用 32 curEle.attr('index',index); 33 34 //将元素的初始位置保存起来 35 position.coord.push({ 36 X:ListWidth + gap.X, 37 Y:gap.Y 38 }); 39 j++; 40 41 //设置父元素的高度 42 parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y); 43 44 ListWidth = curEle.offset().left + curEle.width(); 45 }); 46 }, 47 //将子元素插入到父元素中 48 addTo:function(child,parent,target){ 49 //父元素在视口的坐标 50 var parentPos = { 51 X:parent.offset().left, 52 Y:parent.offset().top 53 }; 54 55 //目标位置相对于视口的坐标 56 var targetPos = { 57 X:target.offset().left, 58 Y:target.offset().top 59 }; 60 61 //确保父元素是相对定位 62 if(parent.css('position') !== "relative"){ 63 parent.css({ 64 'position':'relative' 65 }); 66 } 67 68 parent.css({ 69 'z-index':'12' 70 }); 71 //将子元素插入父元素中 72 parent.append(child); 73 74 //确定子元素在父元素中的位置并且保证子元素的大小不变 75 child.css({ 76 position:absolute, 77 top:targetPos.Y - parentPos.Y, 78 left:targetPos.X - parentPos.X, 79 width:target.width(), 80 height:target.height() 81 }); 82 83 }, 84 //将元素恢复到原来的位置 85 restore:function(elem){ 86 //获得元素的标识 87 var index = parseInt( elem.attr('index') ); 88 elem.css({ 89 top:position.coord[index].Y, 90 left:position.coord[index].X 91 }); 92 93 }, 94 //拖拽元素的初始坐标 95 coord:[], 96 //判断元素A是否在元素B的范围内 97 isRang:function(control,dragListPar,$target){ 98 var isSituate = undefined; 99 if(control.offset().top > dragListPar.offset().top){ 100 isSituate = $target.offset().top > control.offset().top 101 && $target.offset().left > control.offset().left 102 && ($target.offset().left + $target.width()) < (control.offset().left + control.width()); 103 }else{ 104 isSituate = ($target.offset().top + $target.height())<(control.offset().top + control.height()) 105 && $target.offset().top > control.offset().top 106 && $target.offset().left > control.offset().left 107 && ($target.offset().left + $target.width()) < (control.offset().left + control.width()); 108 } 109 return isSituate; 110 } 111 }; 112 module.exports = position;
四.drag模块的代码
1 var $ = require('jquery'); 2 var position = require('./position.js'); 3 4 var drag = { 5 //拖拽元素的父元素的id 6 dragParen:undefined, 7 //操作台的id值 8 control:undefined, 9 //移动块相对视口的位置 10 position:{ 11 X:undefined, 12 Y:undefined 13 }, 14 //触摸点相对视口的位置，在滑动过程中会不断更新 15 touchPos:{ 16 X:undefined, 17 Y:undefined 18 }, 19 //开始触摸时触摸点相对视口的位置 20 startTouchPos:{ 21 X:undefined, 22 Y:undefined 23 }, 24 //触摸点相对于移动块的位置 25 touchOffsetPos:{ 26 X:undefined, 27 Y:undefined 28 }, 29 //获取拖拽元素父元素id和控制台的ID的值 30 setID:function(dragList,control){ 31 this.dragParent = dragList; 32 this.control = control; 33 }, 34 touchStart:function(e){ 35 var target = e.target; 36 37 //阻止冒泡 38 e.stopPropagation(); 39 40 //阻止浏览器默认的缩放和滚动 41 e.preventDefault(); 42 43 var $target = $(target); 44 45 //手指刚触摸到屏幕上时，触摸点的位置 46 drag.startTouchPos.X = e.targetTouches[0].clientX; 47 drag.startTouchPos.Y = e.targetTouches[0].clientY; 48 49 //触摸元素相对视口的位置 50 drag.position.X = $target.offset().left; 51 drag.position.Y = $target.offset().top; 52 53 //触摸点相对于视口的位置，滑动过程中不断更新 54 drag.touchPos.X = e.targetTouches[0].clientX; 55 drag.touchPos.Y = e.targetTouches[0].clientY; 56 57 //触摸点相对于触摸元素的位置 58 drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X; 59 drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y; 60 61 //给目标元素绑定touchMove事件 62 $target.unbind('touchmove').on('touchmove',drag.touchMove); 63 64 }, 65 touchMove:function(e){ 66 67 var target = e.target; 68 69 //阻止冒泡 70 e.stopPropagation(); 71 72 //阻止浏览器默认的缩放和滚动 73 e.preventDefault(); 74 75 var $target = $(target); 76 77 //获得触摸点的位置 78 drag.touchPos.X = e.targetTouches[0].clientX; 79 drag.touchPos.Y = e.targetTouches[0].clientY; 80 81 //修改移动块的位置 82 $target.offset({ 83 top: drag.touchPos.Y - drag.touchOffsetPos.Y, 84 left: drag.touchPos.X - drag.touchOffsetPos.X 85 }); 86 87 //给移动元素绑定touchend事件 88 $target.unbind('touchend').on('touchend',drag.touchEnd); 89 }, 90 touchEnd:function(e) { 91 var target = e.target; 92 93 //阻止冒泡 94 e.stopPropagation(); 95 96 //阻止浏览器默认的缩放和滚动 97 e.preventDefault(); 98 99 var $target = $(target); 100 var parent = $target.parent(); 101 102 //得到控制台和拖动元素列表的父元素 103 var control = $("#" + drag.control); 104 var dragListPar = $('#' + drag.dragParent); 105 106 //拖动元素是否位于控制台 107 var sitControl = position.isRang(control, dragListPar, $target); 108 109 //拖动结束后，如果拖拽元素的父元素是拖拽列表 110 if (parent.attr('id') === drag.dragParent) { 111 //如果元素位于控制台 112 if (sitControl) { 113 var dragChild = $target.clone(); 114 115 //为克隆出的元素绑定touchstart事件 116 dragChild.unbind('touchstart').on('touchstart',drag.touchStart); 117 118 //将克隆出的元素插入到控制台 119 position.addTo(dragChild, control, $target); 120 } 121 122 //将原来的触摸元素恢复到初始位置 123 position.restore($target); 124 } 125 126 // 拖拽结束后，如果拖拽元素的父元素是控制台，并且元素拖出了控制台 127 if (parent.attr('id') === drag.control && !sitControl) { 128 $target.remove(); 129 } 130 } 131 }; 132 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值为control
drag.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 }) ] };
