Posted in Javascript onNovember 05, 2009
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> 模仿JQuery sortable效果 </title> <style type="text/css"> ul { width :200px; list-style-type:none; margin:0px; padding:0px; } li { height: 100px; width: 202px } </style> <script type="text/javascript"> 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 style="border:#ccc 1px solid;"> <tr> <td style="width:2000px;border:#ccc 1px solid;"> <input id="Text1" style="width:500px; height:300px;" type="text" /> sfsfa </td> <td style="width:400px; border:#ccc 1px solid;"> <div> <div style="padding: 5px"> <ul id="leftUL" style="height:500px; overflow:auto;"> <li id="node1"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /> </li> <li id="node2"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> <li id="node3"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> <li id="node4"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> <li id="node5"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> <li id="node6"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> </ul> </div> </div> </td> <td style="width:400px;width:400px; border:#ccc 1px solid;"> <ul id="rightUL" style="height:500px; overflow:auto;"> <li id="Li1"> <div> n11</div> </li> <li id="Li2">n12</li> <li id="Li3">n13</li> <li id="Li4">n14</li> <li id="Li5">n15</li> <li id="Li6">n16</li> </ul> </td> </tr> </table> </form> <div align="center"> 联系方式:QQ:492006183 MSN:zhang-lizhi@hotmail.com </div> <script type="text/javascript"> sortableDoubleUl.init() </script> </body> </html>
模仿JQuery sortable效果 代码有错但值得看看
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@