简易而又灵活的Javascript拖拽框架（四）

核心提示： 4、在拖动的过程中，注意维持module的column变量，简易而又灵活的Javascript拖拽框架（四）(2)，这个变量对于拖放很重要，要及时而正确的更新，不过我总结出来几点：1、对于任何一个对象，要分清楚这个对象是html对象还是我们自定义类的对象；2、各种对象尽量少维持一些变量，5

4、在拖动的过程中，注意维持module的column变量，这个变量对于拖放很重要，要及时而正确的更新。

5、在拖动结束的时候，如果鼠标还在某个tab上（无论这个时候页面是不是因为鼠标的停留而改变），则把module放在这一页的第一列的第一个位置。如果不在tab上，那么和页面内拖放是一样的。无论怎样，在最后都要设置一些style以及更新个别变量，放置完毕。

三、代码

原理说起来容易，写起来还是很麻烦的，而且得经过很多次测试才能成功的。

不过我总结出来几点：

1、对于任何一个对象，要分清楚这个对象是html对象还是我们自定义类的对象；

2、各种对象尽量少维持一些变量，要不然在每次动作发生的时候都会去更新一堆变量，那将是很麻烦的（或许可以将这些变量的设置封装成对象的方法）；

主要代码如下：

Code

varmodule=function(moduleElm){
　　varself=this;
　　this.elm=moduleElm;
　　this.elm.module=this;
　　this.column=moduleElm.column;
　　this.page=this.column.page;
　　this.handle=this.elm.getElementsByTagName("h3")[0];
　　//这里只是为了各个页面的module看起来不一样所以另外设置一下style
　　//page的id也是为了这个目的而加的其他地方page的id是用不上的
　　
　　switch(this.page.id){
　　　　case"page1":this.handle.style.backgroundColor="red";break;
　　　　case"page2":this.handle.style.backgroundColor="blue";break;
　　　　case"page3":this.handle.style.backgroundColor="black";break;
　　　　case"page4":this.handle.style.backgroundColor="#CCCCCC";break;
　　}
　　
　　
　　if(this.handle&&this.elm){
　　　　Drag.init(this.handle,this.elm);
　　}else{
　　　　return;
　　}
　　this.elm.onDragStart=function(left,top,mouseX,mouseY){
　　　　//开始拖动的时候设置透明度
　　　　
　　　　this.style.opacity="0.5";
　　　　this.style.filter="alpha(opacity=50)";
　　　　dragGhost.style.height=isIE?this.offsetHeight:this.offsetHeight-2;
　　　　
　　　　//this指的是item
　　　　
　　　　this.style.width=this.offsetWidth;//因为初始的width为auto
　　　　this.style.left=findPosX(this)-5;
　　　　this.style.top=findPosY(this)-5;
　　　　this.style.position="absolute";
　　　　
　　　　//将ghost插入到当前位置
　　　　
　　　　dragGhost.style.display="block";
　　　　self.column.insertBefore(dragGhost,this);
　　　　
　　　　//记录每一列的左边距在拖动过程中判断拖动对象所在的列会用到
　　　　
　　　　this.columnsX=[];
　　　　for(vari=0;i<self.column.page.columns.length;i++){
　　　　　　this.columnsX.push(findPosX(self.column.page.columns[i]));
　　　　}
　　　　　　
　　}
　　this.elm.onDrag=function(left,top,mouseX,mouseY){
　　　　this.currentTab=null;
　　　　//判断是否在tab上
　　　　
　　　　for(vari=0;i<XDrag.tabs.length;i++){
　　　　　　vartabElm=XDrag.tabs[i].elm;
　　　　　　if((findPosX(tabElm)<mouseX)&&
　　　　　　　　(findPosX(tabElm)+tabElm.offsetWidth>mouseX)&&
　　　　　　　　(findPosY(tabElm)<mouseY)&&
　　　　　　　　(findPosY(tabElm)+tabElm.offsetHeight>mouseY)){
　　　　　　　　this.currentTab=XDrag.tabs[i];
　　　　　　　　break;
　　　　　　}
　　　　}
　　　　if(this.currentTab!=null){
　　　　　　if(dragGhost.parentNode)
　　　　　　　　dragGhost.parentNode.removeChild(dragGhost);
　　　　　　functionchangeTab(){
　　　　　　　　//先得把module放到当前的这一页
　　　　　　　　//否则会随着tab的改变而消失
　　　　　　　　
　　　　　　　　varcurrentColumn=self.elm.currentTab.page.columns[0];
　　　　　　　　
　　　　　　　　varflag=false;
　　　　　　　　for(vari=0;i<currentColumn.childNodes.length;i++){
　　　　　　　　　　if(currentColumn.childNodes[i].nodeName.toLowerCase()=="div"){
　　　　　　　　　　　　currentColumn.insertBefore(self.elm,currentColumn.childNodes[i]);
　　　　　　　　　　　　flag=true;
　　　　　　　　　　　　break;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　if(!flag)
　　　　　　　　　　currentColumn.appendChild(this);
　　　　　　　　self.column=currentColumn;//将拖动的module添加到这一页的第一列因为display还为absolute所以module还跟着鼠标在走
　　　　　　　　
　　　　　　　　self.elm.currentTab.select();
　　　　　　　　XDrag.changeTabTimeoutId==null;
　　　　　　}
　　　　　　
　　　　　　//如果Timeout不为空（防止重复设置Timeout）而且移动到的tab不是当前的tab（如果是当前tab则不需要改变tab页了）
　　　　　　
　　　　　　if(XDrag.changeTabTimeoutId==null&&this.currentTab!=XDrag.selectedTab)
　　　　　　　　XDrag.changeTabTimeoutId=setTimeout(changeTab,XDrag.changeTabTimeout);
　　　　　　return;//如果鼠标在tab上则不必理会页面内的移动了
　　　　　　
　　　　}
　　　　
　　　　//以下是计算在页面内拖拽的代码
　　　　
　　　　clearTimeout(XDrag.changeTabTimeoutId);
　　　　XDrag.changeTabTimeoutId=null;//既然鼠标都没有在tab上了当然就应该清空timeout了
　　　　//先要判断在哪一列移动
　　　　
　　　　varcolumnIndex=0;
　　　　
　　　　for(vari=0;i<this.columnsX.length;i++){
　　　　　　if((left+this.offsetWidth/2)>this.columnsX[i]){
　　　　　　　　columnIndex=i;
　　　　　　}
　　　　}
　　　　//如果columnIndex在循环中没有被赋值则表示当前拖动对象在第一列的左边
　　　　//此时也把它放到第一列
　　　　
　　　　varcolumn=self.column.page.columns[columnIndex];
　　　　
　　　　if(self.column!=column){
　　　　　　//之前拖动对象不在这个列
　　　　　　//将ghost放置到这一列的最下方
　　　　　　
　　　　　　//如果已经跨页拖放了也会执行这里的
　　　　　　
　　　　　　column.appendChild(dragGhost);
　　　　　　self.column=column;
　　　　}
　　　　
　　　　//然后在判断放在这一列的什么位置
　　　　
　　　　varcurrentNode=null;
　　　　for(vari=0;i<self.column.childNodes.length;i++){
　　　　　　if(self.column.childNodes[i].className=="item"
　　　　　　&&self.column.childNodes[i]!=this//不能跟拖动元素自己比较否则不能在本列向下移动
　　　　　　
　　　　　　&&top<findPosY(self.column.childNodes[i])){//从上到下找到第一个比拖动元素的上边距大的元素
　　　　　　
　　　　　　　　currentNode=self.column.childNodes[i];
　　　　　　　　break;
　　　　　　}
　　　　}
　　　　if(currentNode)
　　　　　　self.column.insertBefore(dragGhost,currentNode);
　　　　else//拖到最下边没有任何一个元素的上边距比拖动元素的top大则添加到列的最后
　　　　
　　　　　　self.column.appendChild(dragGhost);
　　}
　　this.elm.onDragEnd=function(left,top,mouseX,mouseY){
　　　　if(this.currentTab!=null){
　　　　　　//this.currentTab!=null表示鼠标拖拽的module在tab上释放无论这个时候tab是否因为鼠标的停留而转换了页签
　　　　　　
　　　　　　clearTimeout(XDrag.changeTabTimeoutId);
　　　　　　XDrag.changeTabTimeoutId=null;
　　　　　　varfirstColumn=this.currentTab.page.columns[0];
　　　　　　varflag=false;
　　　　　　for(vari=0;i<firstColumn.childNodes.length;i++){
　　　　　　　　if(firstColumn.childNodes[i].nodeName.toLowerCase()=="div"){
　　　　　　　　　　firstColumn.insertBefore(this,firstColumn.childNodes[i]);
　　　　　　　　　　flag=true;
　　　　　　　　　　break;
　　　　　　　　}
　　　　　　}
　　　　　　if(!flag)
　　　　　　　　firstColumn.appendChild(this);
　　　　　　self.column=firstColumn;
　　　　}else{
　　　　　　self.column.insertBefore(this,dragGhost);
　　　　}
　　　　this.style.opacity="1";
　　　　this.style.filter="alpha(opacity=100)";
　　　　
　　　　this.style.position="static";
　　　　this.style.display="block";
　　　　this.style.width="auto";
　　　　dragGhost.style.display="none";
　　　　self.page=self.column.page;//需要手动更新(奇怪self.page难道是个值类型)
　　　　//也可以不要最后这一句仅仅是为了数据的完整性
　　　　
　　}
　　
}