模仿JQuery sortable效果代码有错但值得看看

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>

模仿JQuery sortable效果

</title>

{

width :200px;

list-style-type:none;

margin:0px;

padding:0px;

}

{

height: 100px; width: 202px

}

</style>

var sortableDoubleUl=

{

offsetYInsertDiv:document.all?-10:-3,

srcUL:false,

leftUL:"leftUL",

rightUL:"rightUL",

moveableUL:false,

moveCounter:-1,

srcLI:false,

srcNextSibling:false,

leftPosOfLeftUL:false,

widthOfLeftUL:false,

leftPosOfRightUL:false,

widthOfRightUL:false,

insertDiv:false,

insertAsFirstNode:false,

descElement:false,

timer:10,

init:function()

{

this.leftUL = document.getElementById(this.leftUL);//<ul id="arrangableNodes">

this.rightUL= document.getElementById(this.rightUL);//<ul id="ul2">

var moveableUL= document.createElement('UL');

var moveableDiv=document.createElement("DIV");

moveableDiv.appendChild(moveableUL);

moveableDiv.style.position="absolute";

document.body.appendChild(moveableDiv);

this.moveableUL =moveableUL;

var insertDiv=document.createElement("DIV");

insertDiv.style.position="absolute";

insertDiv.style.display="none";

document.body.appendChild(insertDiv);

insertDiv.innerHTML="<img src='../images/insert.gif'/>";

this.insertDiv =insertDiv;

this.leftPosOfLeftUL =this.getAbsoluteLeftPos(this.leftUL);

this.leftPosOfRightUL=this.getAbsoluteLeftPos(this.rightUL);

this.insertDiv.style.left = this.leftPosOfLeftUL - 5 + 'px';

this.widthOfLeftUL= this.leftUL.offsetWidth;

this.widthOfRightUL=this.rightUL.offsetWidth;

var leftLi =this.leftUL.getElementsByTagName('LI');

for(var i=0;i<leftLi.length;i++)

{

leftLi[i].onmousedown = this.initMoveNode;

//不允许复制文字

leftLi[i].onselectstart = this.cancelEvent;

}

var rightLi =this.rightUL.getElementsByTagName('LI');

for(var i=1;i<rightLi.length-1;i++)

{

rightLi[i].onmousedown = this.initMoveNode;

//不允许复制文字

rightLi[i].onselectstart = this.cancelEvent;

}

document.documentElement.onmouseup =this.NodeStopMove;

document.documentElement.onmousemove =this.NodeMove;

document.documentElement.onselectstart = this.cancelEvent;

cancelEvent:function (){return false},//无事件

getAbsoluteTopPos:function(srcObj)//获取控件距文档顶部的绝对位置

{

var returnValue = srcObj.offsetTop;

while((srcObj = srcObj.offsetParent) != null)

{

returnValue += srcObj.offsetTop;

}

return returnValue;

getAbsoluteLeftPos:function(srcObj)//获取控件距文档底部的绝对位置

{

//如果父元素的position不是relative或absolute就会一直向上找直到body

var returnValue = srcObj.offsetLeft;

while((srcObj = srcObj.offsetParent) != null)

{

returnValue += srcObj.offsetLeft;

}

return returnValue;

initMoveNode:function(e)//当鼠标按下LI时初始化LI节点

{

//clearMovableDiv();

if(document.all)

{

e = event;

}

//每次初始化节点时将其清0

sortableDoubleUl.moveCounter=0;

sortableDoubleUl.srcLI=this;

sortableDoubleUl.srcUL=this.parentNode;

if(this.nextSibling)

sortableDoubleUl.srcNextSibling =this.nextSibling;

else sortableDoubleUl.srcNextSibling = false;

sortableDoubleUl.moveNodeByTimer();

sortableDoubleUl.moveableUL.parentNode.style.left = e.clientX + 'px';

sortableDoubleUl.moveableUL.parentNode.style.top = e.clientY + 'px';

return false;

moveNodeByTimer:function ()

{

if(this.moveCounter>=0 && this.moveCounter<10)

{

this.moveCounter = this.moveCounter +1;

setTimeout('sortableDoubleUl.moveNodeByTimer()',this.timer);

}

if(this.moveCounter>=10)

{

this.moveableUL.appendChild(this.srcLI);

}

NodeMove:function(e)

{

if(document.all)e = event;

//当前选中时间不到时不可移动

if(sortableDoubleUl.moveCounter<10)return;

if(document.all && sortableDoubleUl.moveCounter>=10 && e.button!=1 && navigator.userAgent.indexOf('Opera')==-1){

alert("非微软&&超过移动时间");

sortableDoubleUl.NodeStopMove();

}

//当前要移动的UL的位置跟随鼠标位置

sortableDoubleUl.moveableUL.parentNode.style.left = e.clientX + 'px';

sortableDoubleUl.moveableUL.parentNode.style.top = e.clientY + 'px';

//临时变量保存鼠标的起始移动Y轴位置

var tmpY = e.clientY;

var tmpX = e.clientX;

sortableDoubleUl.insertDiv.style.display='none';

sortableDoubleUl.descElement = false;

//window.status=tmpX+":"+tmpY+"ul1left:"+leftPosArrangableNodes+"|"+(leftPosArrangableNodes + widthArrangableNodes)+"ul2left:"+leftPosArrangableNodes2+"|"+(leftPosArrangableNodes2+widthArrangableNodes2);

if(tmpX>sortableDoubleUl.leftPosOfLeftUL&&tmpX<(sortableDoubleUl.leftPosOfLeftUL +sortableDoubleUl.widthOfLeftUL))

{

var leftLI =sortableDoubleUl.leftUL.getElementsByTagName('LI');

sortableDoubleUl.insertDiv.style.left = (sortableDoubleUl.leftPosOfLeftUL + sortableDoubleUl.offsetYInsertDiv) + 'px';

for(var i=0;i<leftLI.length;i++)

{

//获取LI的TOP位置

var topPos =sortableDoubleUl.getAbsoluteTopPos(leftLI[i]);

//获取LI的原始高度

var tmpHeight = leftLI[i].offsetHeight;

if(i==0)

{

if(tmpY<=topPos && tmpY>=topPos-5)

{

sortableDoubleUl.insertDiv.style.top = (topPos +sortableDoubleUl.offsetYInsertDiv) + 'px';

sortableDoubleUl.insertDiv.style.display = 'block';

sortableDoubleUl.descElement = leftLI[i];

sortableDoubleUl.insertAsFirstNode = true;

return;

}

if(tmpY>=topPos && tmpY<=(topPos+tmpHeight))

{

sortableDoubleUl.insertDiv.style.top = (topPos+tmpHeight +sortableDoubleUl.offsetYInsertDiv) + 'px';

sortableDoubleUl.insertDiv.style.display = 'block';

sortableDoubleUl.insertAsFirstNode = leftLI[i];

sortableDoubleUl.descElement = leftLI[i];

insertAsFirstNode = false;

return;

}

else if(tmpX>sortableDoubleUl.leftPosOfRightUL&&tmpX<(sortableDoubleUl.leftPosOfRightUL +sortableDoubleUl.widthOfRightUL))

{

var rightLI =sortableDoubleUl.rightUL.getElementsByTagName('LI');

sortableDoubleUl.insertDiv.style.left =(sortableDoubleUl.leftPosOfRightUL+sortableDoubleUl.offsetYInsertDiv) + 'px';

for(var i=0;i<rightLI.length;i++)

{

//获取LI的TOP位置

var topPos =sortableDoubleUl.getAbsoluteTopPos(rightLI[i]);

//获取LI的原始高度

var tmpHeight = rightLI[i].offsetHeight;

if(i==0)

{

if(tmpY<=topPos && tmpY>=topPos-5)

{

sortableDoubleUl.insertDiv.style.top = (topPos +sortableDoubleUl.offsetYInsertDiv) + 'px';

sortableDoubleUl.insertDiv.style.display = 'block';

sortableDoubleUl.descElement = rightLI[i];

sortableDoubleUl.insertAsFirstNode = true;

return;

}

if(tmpY>=topPos && tmpY<=(topPos+tmpHeight))

{

sortableDoubleUl.insertDiv.style.top = (topPos+tmpHeight +sortableDoubleUl.offsetYInsertDiv) + 'px';

sortableDoubleUl.insertDiv.style.display = 'block';

sortableDoubleUl.descElement = rightLI[i];

sortableDoubleUl.insertAsFirstNode = false;

return;

}

else

{

return;

}

ClearMoveNode:function()

{

this.descElement = false;

if(sortableDoubleUl.moveableUL.getElementsByTagName('LI').length>0)

{

if(sortableDoubleUl.srcNextSibling)

this.srcUL.insertBefore(sortableDoubleUl.srcLI,sortableDoubleUl.srcNextSibling);

else sortableDoubleUl.srcUL.appendChild(sortableDoubleUl.srcLI);

}

NodeStopMove:function(e)

{

sortableDoubleUl.moveCounter = -1;

sortableDoubleUl.insertDiv.style.display='none';

//如果找到目标

if(sortableDoubleUl.descElement)

{

var parentUL=sortableDoubleUl.descElement.parentNode;

var li = parentUL.getElementsByTagName('LI');

if(sortableDoubleUl.descElement==li[0] && sortableDoubleUl.insertAsFirstNode)

{

if(parentUL==sortableDoubleUl.rightUL)

{

alert("首节点必须是公文起草")

sortableDoubleUl.ClearMoveNode();

}

else

{

parentUL.insertBefore(sortableDoubleUl.srcLI,sortableDoubleUl.descElement);

}

else

{

if(sortableDoubleUl.descElement.nextSibling)

{

parentUL.insertBefore(sortableDoubleUl.srcLI,sortableDoubleUl.descElement.nextSibling);

}

else

{

if(parentUL==sortableDoubleUl.rightUL)

{

sortableDoubleUl.ClearMoveNode();

alert("末节点必须是公文发送")

}

else

{

parentUL.appendChild(sortableDoubleUl.srcLI);

}

else

{

//未找到

alert("未找到");

sortableDoubleUl.ClearMoveNode();

}

};

</script>

</head>

<body>

<h1>

Arrange the nodes below</h1>

<table>

<tr>

<td>

sfsfa

</td>

<td>

<div>

</li>

</ul>

</div>

</td>

<td>

<div>

n11</div>

</li>

</ul>

</td>

</tr>

</table>

</form>

联系方式：QQ：492006183

MSN：zhang-lizhi@hotmail.com

</div>

sortableDoubleUl.init()

</script>

</body>

</html>