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

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模块暴露出来

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;

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;

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');

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})]};