WeX5中实现拖拽替换效果.docxVIP

　　第一步是搭建数据库，先在前台界面把内容展示出来　　搭建一个名为drag的数据库，在数据库中件名为items的表，字段如下。　　 　　新建drag服务，并在前台界面调用。在界面添加baasData数据库，绑定drag服务。　　并用list数据组件对数据进行展示　　 　　图为对数据进行初次展示的效果。　　下面主要讲解实现效果的代码：　　js实现的大概思路还是主要包括三部分：开始——移动——结束　　手指触屏对应touchstart　　手指移动对应touchmove　　手指松开对应touchend　　当然在这之前还得做一下准备工作——定义一些全局参数用于承载被拖动的元素，被替换的元素和一些坐标点等　 　　var Model = function(){　　this.callParent();　　this.curTarget = null;//被拖动的元素　　this.curPos = null;//坐标点　　this.dropTarget = null;//被替换的元素　　this.iMouseDown = null;//手指是否触屏　　this.lMouseState = null;//状态　　this.dragreplaceCont = [];//将遍历的元素放于此数组中　　this.mouseOffset = null;//鼠标得偏移　　this.callbackFunc = null;//回调函数　　};　 　　在modelLoad中，新建一个div用于承载被拖动的元素　　并且遍历要拖动的元素，将他们放置在数组中，用于之后的匹配元素做准备，且设置他们为可拖动状态,代码如下：　　Mtotype.modelLoad = function(event){　　//辅助层用来显示拖拽　　dragHelper = document.createElement(DIV);　　dragHelper.setAttribute(class,dragHelper czYfqmm )　　dragHelper.style.cssText = position:absolute;display:none;;　　document.body.appendChild(dragHelper);　　var dragitems = document.getElementById(displayRoom).getElementsByTagName(a);//获取可拖动的所有元素　　for(var i=0;iDRAGITEMS.LENGTH;I++){ p 遍历可拖动的元素 　　this.dragreplaceCont.push(dragitems[i]);　　dragitems[i].setAttribute(candrag, 1);　　}};给元素绑定以上三个事件　　 　 首先当然是在start中记录状态值，　　Mtotype.start = function(event){　　//记录变量状态　　this.iMouseDown = true;　　};　　接下来就是移动的动作：　　1、先获取当前鼠标点击的元素　　2、判断当前是否为可拖动状态　　3、将当前元素赋值给之前定义的全局参数this.curTarget　　4、获取元素的坐标点，以及按下的坐标点对于元素左上角的偏移量　　5、清空之前在modelload中定义的辅助层dragHelper，将当前元素this.curTarget放进去，设置dragHelper为可见状态，当前元素this.curTarget不可见，　　6、记录起始坐标点并且，如果处于移动状态，则设置辅助层dragHelper的top和left值，使其实时移动(使用css的position达到移动效果)　　7、遍历各个元素，看当前在移动的元素是否与其中某个除自己之外的元素重合，　　8、如果重合，则将被重合的元素赋值给全局变量this.dropTarget，并给this.dropTarget添加被选中的样式　　最后是鼠标松开的动作：　　1、判断是否有被选中的元素和要被替换的元素　　2、获取两个元素所在的行数据，并分别设置两个行数据的值，即对两个值进行替换　　3、判断两个行数据是否被改变过，如果有则保存数据，并对一些全局参数进行还原，以备下一次的拖动替换　　不知道怎么上传压缩包，所以就用笨方法上传代码了。　　下面附上完整的代码　　 　　1 define(function(require){　　2 var $ = require(jquery);　　3 var justep = require($UI/system/lib/justep);　　4　　5 var Model = function(){　　6 this.callParent();　　7　　8