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

核心提示： 3、拖动完成将ghost替换为被拖动的元素，设置相应的样式三、代码Code//UtilityfunctionfindPosX(obj){//辅助函数得到元素左边与浏览器左边的边距varcurleft=0;if(obj&&obj.offsetParent){while(obj.offsetP

3、拖动完成

将ghost替换为被拖动的元素，设置相应的样式

三、代码

Code

//------------------------Utility------------------------
functionfindPosX(obj){//辅助函数得到元素左边与浏览器左边的边距
　　varcurleft=0;
　　if(obj&&obj.offsetParent){
　　　　while(obj.offsetParent){
　　　　　　curleft+=obj.offsetLeft;
　　　　　　obj=obj.offsetParent;
　　　　}
　　}elseif(obj&&obj.x)curleft+=obj.x;
　　returncurleft;//+document.body.scrollLeft-document.body.clientLeft;
}
functionfindPosY(obj){//辅助函数得到元素上边与浏览器上边的边距
　　varcurtop=0;
　　if(obj&&obj.offsetParent){
　　　　while(obj.offsetParent){
　　　　　　curtop+=obj.offsetTop;
　　　　　　obj=obj.offsetParent;
　　　　}
　　}elseif(obj&&obj.y)curtop+=obj.y;
　　returncurtop;//+document.body.scrollTop-document.body.clientTop;
}
vardragGhost=document.createElement("div");
dragGhost.style.border="dashed1px#CCCCCC";
dragGhost.style.background="white";
dragGhost.style.display="none";
dragGhost.style.margin="10px";
varcontainer;
varcolumns=[];
//------------------------StartHere------------------------
window.onload=function(){
　　container=document.getElementById("container");
　　
　　for(vari=0;i<container.childNodes.length;i++){
　　　　if(container.childNodes[i].className=="column"){//筛选出所有的列ff下的childNodes不可靠:
　　　　　　columns.push(container.childNodes[i]);
　　　　}
　　}
　　for(vari=0;i<columns.length;i++){
　　　　varcolumn=columns[i];
　　　　for(varj=0;j<column.childNodes.length;j++){
　　　　　　varitem=column.childNodes[j];
　　　　　　if(item.className=="item"){
　　　　　　　　item.column=column;//给每个拖拽对象要指明它属于哪一列而且这个属性会随着拖动而更新的
　　　　　　　　
　　　　　　　　newdragItem(item);
　　　　　　}
　　　　}
　　}
}
varisIE=document.all;
//------------------------DragItem------------------------
functiondragItem(item){
　　//item实际上是dragBody(拖动的时候移动的整体)
　　//在这里需要根据item找到handle(能够拖动的把手)
　　
　　varhandle;
　　for(vari=0;i<item.childNodes.length;i++){
　　　　if(item.childNodes[i].nodeName.toLowerCase()=="h3"){
　　　　　　handle=item.childNodes[i];
　　　　　　break;
　　　　}
　　}
　　if(!handle)return;
　　Drag.init(handle,item);
　　item.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";
　　　　this.column.insertBefore(dragGhost,this);
　　　　
　　　　//记录每一列的左边距在拖动过程中判断拖动对象所在的列会用到
　　　　this.columnsX=[];
　　　　for(vari=0;i<columns.length;i++){
　　　　　　this.columnsX.push(findPosX(columns[i]));
　　　　}
　　　　　　
　　}
　　item.onDrag=function(left,top,mouseX,mouseY){
　　
　　　　//先要判断在哪一列移动
　　　　varcolumnIndex=0;
　　　　
　　　　for(vari=0;i<this.columnsX.length;i++){
　　　　　　if((left+this.offsetWidth/2)>this.columnsX[i]){
　　　　　　　　columnIndex=i;
　　　　　　}
　　　　}
　　　　//如果columnIndex在循环中没有被赋值则表示当前拖动对象在第一列的左边
　　　　//此时也把它放到第一列
　　　　
　　　　varcolumn=columns[columnIndex];
　　　　
　　　　if(this.column!=column){
　　　　　　//之前拖动对象不在这个列
　　　　　　//将ghost放置到这一列的最下方
　　　　　　
　　　　　　column.appendChild(dragGhost);
　　　　　　this.column=column;
　　　　}
　　　　
　　　　//然后在判断放在这一列的什么位置
　　　　
　　　　varcurrentNode=null;
　　　　for(vari=0;i<this.column.childNodes.length;i++){
　　　　　　if(this.column.childNodes[i].className=="item"
　　　　　　&&this.column.childNodes[i]!=this//不能跟拖动元素自己比较否则不能在本列向下移动
　　　　　　&&top<findPosY(this.column.childNodes[i])){//从上到下找到第一个比拖动元素的上边距大的元素
　　　　　　
　　　　　　　　currentNode=this.column.childNodes[i];
　　　　　　　　break;
　　　　　　}
　　　　}
　　　　if(currentNode)
　　　　　　this.column.insertBefore(dragGhost,currentNode);
　　　　else//拖到最下边没有任何一个元素的上边距比拖动元素的top大则添加到列的最后
　　　　
　　　　　　this.column.appendChild(dragGhost);
　　}
　　item.onDragEnd=function(left,top,mouseX,mouseY){
　　　　this.style.opacity="1";
　　　　this.style.filter="alpha(opacity=100)";
　　　　
　　　　this.column.insertBefore(this,dragGhost);
　　　　
　　　　this.style.position="static";
　　　　this.style.display="block";
　　　　this.style.width="auto";
　　　　dragGhost.style.display="none";
　　}
}

如果这样不方便观看，可以下载示例。