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;
五.入口文件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的配置文件如下：