Imitate JQuery sortable effect. The code is wrong but worth a look_javascript skills

Copy code The code is as follows: 模仿JQuery sortable效果 ul { width :200px; list-style-type:none; margin:0px; padding:0px; } li { height: 100px; width: 202px } 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);// this.rightUL= document.getElementById(this.rightUL);// 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=" "; 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[i].onmousedown = this.initMoveNode; //不允许复制文字 leftLi[i].onselectstart = this.cancelEvent; } var rightLi =this.rightUL.getElementsByTagName('LI'); for(var i=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 { 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 if(document.all && sortableDoubleUl.moveCounter>=10 && e.button!=1 && navigator.userAgent.indexOf('Opera')==-1){ alert("非微软&&超过移动时间"); sortableDoubleUl.NodeStopMove(); } //The position of the UL currently to be moved follows the mouse position sortableDoubleUl.moveableUL.parentNode.style.left = e.clientX 'px'; sortableDoubleUl.moveableUL.parentNode.style.top = e. clientY 'px'; //Temporary variable saves the starting Y-axis position of the mouse 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 { var leftLI =sortableDoubleUl.leftUL.getElementsByT agName('LI'); sortableDoubleUl. insertDiv.style.left = (sortableDoubleUl.leftPosOfLeftUL sortableDoubleUl.offsetYInsertDiv) 'px'; for(var i=0;i { //Get the TOP position of LI var topPos =sortableDoubleUl.getAbsoluteTopPos(leftLI[i]); //Get the original height of LI var tmpHeight = leftLI[i].offsetHeight; if(i==0) { if(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&gt ;=topPos && tmpY { 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 { var rightLI =sortableDoubleUl.rightUL.getElementsByTagName('LI'); sortableDoubleUl.insertDiv. style.left =(sortableDoubleUl.leftPosOfRightUL sortableDoubleUl.offsetYInsertDiv) 'px'; for(var i=0;i { //Get the TOP position of LI var topPos =sortableDoubleUl.getAbsoluteTopPos(rightLI[i]); //Get the original height of LI var tmpHeight = rightLI[i].offsetHeight; if(i==0) { if(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 { 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 the target is found 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("The first node must be a document drafting") 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("The end node must be a public document sent") } else { parentUL.appendChild(sortableDoubleUl.srcLI); } } } } else { //Not found alert(" Not found"); sortableDoubleUl.ClearMoveNode(); } } }; Arrange the nodes below sfsfa n11 n12 n13 n14 n15 n16 联系方式：QQ：492006183 MSN：zhang-lizhi@hotmail.com sortableDoubleUl.init()

Imitate JQuery sortable effect. The code is wrong but worth a look_javascript skills

Arrange the nodes below

Related articles