WeX5中實(shí)現(xiàn)拖拽替換效果

第一步是搭建數(shù)據(jù)庫，先在前臺(tái)界面把內(nèi)容展示出來搭建一個(gè)名為drag的數(shù)據(jù)庫，在數(shù)據(jù)庫中件名為items的表，字段如下。新建drag服務(wù)，并在前臺(tái)界面調(diào)用。在界面添加baasData數(shù)據(jù)庫，綁定drag服務(wù)。并用list數(shù)據(jù)組件對(duì)數(shù)據(jù)進(jìn)行展示圖為對(duì)數(shù)據(jù)進(jìn)行初次展示的效果。下面主要講解實(shí)現(xiàn)效果的代碼：js實(shí)現(xiàn)的大概思路還是主要包括三部分：開始——移動(dòng)——結(jié)束手指觸屏對(duì)應(yīng)touchstart手指移動(dòng)對(duì)應(yīng)touchmove首先當(dāng)然是在start中記錄狀態(tài)值，Mtotype.start=function(event){//記錄變量狀態(tài)this.iMouseDown=true;};接下來就是移動(dòng)的動(dòng)作：1、先獲取當(dāng)前鼠標(biāo)點(diǎn)擊的元素2、判斷當(dāng)前是否為可拖動(dòng)狀態(tài)3、將當(dāng)前元素賦值給之前定義的全局參數(shù)this.curTarget4、獲取元素的坐標(biāo)點(diǎn)，以及按下的坐標(biāo)點(diǎn)對(duì)于元素左上角的偏移量5、清空之前在modelload中定義的輔助層dragHelper，將當(dāng)前元素this.curTarget放進(jìn)去，設(shè)置dragHelper為可見狀態(tài)，當(dāng)前元素this.curTarget不可見，6、記錄起始坐標(biāo)點(diǎn)并且，如果處于移動(dòng)狀態(tài)，則設(shè)置輔助層dragHelper的top和left值，使其實(shí)時(shí)移動(dòng)(使用css的position達(dá)到移動(dòng)效果)7、遍歷各個(gè)元素，看當(dāng)前在移動(dòng)的元素是否與其中某個(gè)除自己之外的元素重合，8、如果重合，則將被重合的元素賦值給全局變量this.dropTarget，并給this.dropTarget添加被選中的樣式最后是鼠標(biāo)松開的動(dòng)作：1、判斷是否有被選中的元素和要被替換的元素2、獲取兩個(gè)元素所在的行數(shù)據(jù)，并分別設(shè)置兩個(gè)行數(shù)據(jù)的值，即對(duì)兩個(gè)值進(jìn)行替換3、判斷兩個(gè)行數(shù)據(jù)是否被改變過，如果有則保存數(shù)據(jù)，并對(duì)一些全局參數(shù)進(jìn)行還原，以備下一次的拖動(dòng)替換不知道怎么上傳壓縮包，所以就用笨方法上傳代碼了。下面附上完整的代碼1define(function(require){2var$=require("jquery");3varjustep=require("$UI/system/lib/justep");45varModel=function(){6this.callParent();78this.curTarget=null;9this.curPos=null;10this.dropTarget=null;11this.iMouseDown=null;12this.lMouseState=null;13this.dragreplaceCont=[];14this.mouseOffset=null;15this.callbackFunc=null;16};1718Mtotype.modelLoad=function(event){19//輔助層用來顯示拖拽20dragHelper=document.createElement('DIV');21dragHelper.setAttribute("class",'dragHelperczYfqmm')22dragHelper.style.cssText='position:absolute;display:none;';23document.body.appendChild(dragHelper);2425vardragitems=document.getElementById('displayRoom').getElementsByTagName("a");//獲取可拖動(dòng)的所有元素26for(vari=0;i<DRAGITEMS.LENGTH;I++){p遍歷可拖動(dòng)的元素<>27this.dragreplaceCont.push(dragitems[i]);28dragitems[i].setAttribute('candrag','1');29}30};3132Mtotype.start=function(event){33//記錄變量狀態(tài)34this.iMouseDown=true;35};3637Mtotype.move=function(event){38ev=event||window.event;39vartarget=ev.target||ev.srcElement;40varmousePos=this.mouseCoords(ev);41//如果當(dāng)前元素可拖拽42vardragObj=target.getAttribute('candrag');43if(dragObj!=null){44if(this.iMouseDown&&!this.lMouseState){45//剛開始拖拽46this.curTarget=target;47this.curPos=this.getPosition(target);48this.mouseOffset=this.getMouseOffset(target,ev);49//清空輔助層50for(vari=0;i<dragHelper.childNodes.length;i++)dragHelper.removeChild(dragHelper.childNodes[i]);51//克隆元素到輔助層，并移動(dòng)到鼠標(biāo)位置52dragHelper.appendChild(this.curTarget.cloneNode(true));53dragHelper.style.display='block';54dragHelper.firstChild.removeAttribute('data-bind');55dragHelper.firstChild.removeAttribute('candrag');56dragHelper.firstChild.setAttribute("class","czYfqmm");57//記錄拖拽元素的位置信息58this.curTarget.setAttribute('startWidth',parseInt(this.curTarget.offsetWidth));59this.curTarget.setAttribute('startHeight',parseInt(this.curTarget.offsetHeight));60this.curTarget.style.background='none';61//記錄每個(gè)可接納元素的位置信息，這里一次記錄以后多次調(diào)用，獲取更高性能62for(vari=0;i<this.dragreplaceCont.length;i++){63with(this.dragreplaceCont[i]){64if(this.dragreplaceCont[i]==this.curTarget)65continue;66varpos=this.getPosition(this.dragreplaceCont[i]);67setAttribute('startWidth',parseInt(offsetWidth));68setAttribute('startHeight',parseInt(offsetHeight));69setAttribute('startLeft',pos.x);70setAttribute('startTop',pos.y);71}75//正在拖拽76if(this.curTarget!=null){77//moveourhelperdivtowhereverthemouseis(adjustedbymouseOffset)78dragHelper.style.top=mousePos.y-this.mouseOffset.y+"px";79dragHelper.style.left=mousePos.x-this.mouseOffset.x+"px";80//拖拽元素的中點(diǎn)81varxPos=mousePos.x;82varyPos=mousePos.y;83varhavedrop=false;84for(vari=0;i<this.dragreplaceCont.length;i++){85with(this.dragreplaceCont[i]){86if(this.dragreplaceCont[i]==this.curTarget)87continue;88if((parseInt(getAttribute('startLeft'))<xPos)&&(parseInt(getAttribute('startTop'))<yPos)&&((parseInt(getAttribute('startLeft'))+parseInt(getAttribute('startWidth')))>xPos)&&((parseInt(getAttribute('startTop'))+parseInt(getAttribute('startHeight')))>yPos)){8990this.dropTarget=this.dragreplaceCont[i];93havedrop=true;94this.dropTarget.className='czYfqmmusrcatch';97break;98}101if(!havedrop&&this.dropTarget!=null){102this.dropTarget.className='czYfqmmusr';103this.dropTarget=null;104}105}//正在拖拽end106this.lMouseState=this.iMouseDown;107if(this.curTarget)returnfalse;//阻止其它響應(yīng)(如：鼠標(biāo)框選文本)108};109110Mtotype.end=function(event){111if(this.curTarget){112dragHelper.style.display='none';//隱藏輔助層113if(this.dropTarget!=null){114//有元素接納，兩者互換115vardatass=p("itemsData");116varrows=datass.find(['name'],[this.curTarget.innerHTML])[0];117varrows1=datass.find(['name'],[this.dropTarget.innerHTML])[0];118varrowsname=this.curTarget.innerHTML;119varrows1name=this.dropTarget.innerHTML;120rows.val("name",rows1name);121rows1.val("name",rowsname);122this.dropTarget.className='czYfqmmusr';123this.dropTarget=null;124if(this.callbackFunc!=null){125this.callbackFunc(this.curTarget);126}127//如果兩者已替換，則保存數(shù)據(jù)庫128if(.changed&&.changed){129datass.saveData({130"onSuccess":function(event){131console.log("替換成功");132}133})136this.curTarget.style.background='green';137this.curTarget.style.visibility='visible';138this.curTarget.setAttribute('candrag','1');139}140this.curTarget=null;141this.iMouseDown=false;142this.lMouseState=false;143};144145Mtotype.mouseCoords=function(ev){//返回鼠標(biāo)相對(duì)頁面左上角的坐標(biāo)146if(ev.pageX||ev.pageY){147return{x:ev.pageX,y:ev.pageY};148}149return{150x:ev.originalEvent.touches[0].pageX,151y:ev.originalEvent.touches[0].pageY152};153}154Mtotype.getPosition=function(e){/