<div class="codetitle"> <span><a style="CURSOR: pointer" data="90896" class="copybut" id="copybut90896" onclick="doCopy('code90896')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code90896"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><머리> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><제목> <br>模仿JQuery sortable效果 <br></title> <br><style type="text/css"> <br>ul <br>{ <br>너비 :200px; <br>목록 스타일 유형:없음; <br>여백:0px; <br>패딩:0px; <br>} <br>리 <br>{ <br>높이: 100px; 너비: 202px <br>} <br></style> <br><br><script type="text/javascript"> <br>var sortableDoubleUl= <br>{ <br>offsetYInsertDiv:document.all?-10:-3, <br>srcUL:false, <br>leftUL:"leftUL", <br>rightUL:"rightUL", <br>moveableUL:false, <br>moveCounter:-1, <br>srcLI:false, <br>srcNextSibling:false, <br>leftPosOfLeftUL:false, <br>widthOfLeftUL:false, <br>leftPosOfRightUL:false, <br>widthOfRightUL:false, <br>insertDiv:false, <br>insertAsFirstNode:false, <br>descElement:false, <br>timer:10, <br>init:function() <br>{ <br> this.leftUL = document.getElementById(this.leftUL);//<ul id="arrangableNodes"> <br>this.rightUL= document.getElementById(this.rightUL);//<ul id="ul2"> <br>var moveableUL= document.createElement('UL'); <br>var moveableDiv=document.createElement("DIV"); <br>moveableDiv.appendChild(moveableUL); <br>moveableDiv.style.position="절대"; <br>document.body.appendChild(moveableDiv); <br>this.moveableUL =moveableUL; <br>var insertDiv=document.createElement("DIV"); <br>insertDiv.style.position="절대"; <br>insertDiv.style.display="없음"; <br>document.body.appendChild(insertDiv); <br>insertDiv.innerHTML="<img src='../images/insert.gif'/>"; <br>this.insertDiv =insertDiv; <br>this.leftPosOfLeftUL =this.getAbsoluteLeftPos(this.leftUL); <br>this.leftPosOfRightUL=this.getAbsoluteLeftPos(this.rightUL); <br>this.insertDiv.style.left = this.leftPosOfLeftUL - 5 'px'; <br>this.widthOfLeftUL= this.leftUL.offsetWidth; <br>this.widthOfRightUL=this.rightUL.offsetWidth; <br>var leftLi =this.leftUL.getElementsByTagName('LI'); <br>for(var i=0;i<leftli.length>{ <br>leftLi[i].onmousedown = this.initMoveNode; <br>//불법한 문자 <br>leftLi[i].onselectstart = this.cancelEvent; <br>} <br>var rightLi =this.rightUL.getElementsByTagName('LI'); <br>for(var i=1;i<rightLi.length-1;i ) <BR>{ <BR>rightLi[i].onmousedown = this.initMoveNode; <BR>//불법문자 <BR>rightLi[i].onselectstart = this.cancelEvent; <BR>} <BR>document.documentElement.onmouseup =this.NodeStopMove; <BR>document.documentElement.onmousemove =this.NodeMove; <BR>document.documentElement.onselectstart = this.cancelEvent; <… = srcObj.offsetTop; <BR>while((srcObj = srcObj.offsetParent) != null) <BR>{ <BR>returnValue = srcObj.offsetTop; <BR>} <BR>return returnValue; <BR>}, <BR>getAbsoluteLeftPos:function(srcObj)//获取控件距文档底부적绝对位置 <BR>{ <BR>//如果父元素의 위치는 상대적인 위치가 아니며 절대적인 위치가 아닙니다.向上找直到본체 <BR>var returnValue = srcObj.offsetLeft; <BR>while((srcObj = srcObj.offsetParent) != null) <BR>{ <BR>returnValue = srcObj.offsetLeft; <BR>} <BR>return returnValue; <BR>}, <BR>initMoveNode:function(e)//当鼠标按下LI时初始化LI节点 <BR>{ <BR>//clearMovableDiv(); <BR>if(document.all) <BR>{ <BR>e = 이벤트; <BR>} <BR>//每次初始化节点时将其清0 <BR>sortableDoubleUl.moveCounter=0; <BR>sortableDoubleUl.srcLI=this; <BR>sortableDoubleUl.srcUL=this.parentNode; <BR>if(this.nextSibling) <BR>sortableDoubleUl.srcNextSibling =this.nextSibling; <BR>그 외 sortableDoubleUl.srcNextSibling = false; <BR>sortableDoubleUl.moveNodeByTimer(); <BR>sortableDoubleUl.moveableUL.parentNode.style.left = e.clientX 'px'; <BR>sortableDoubleUl.moveableUL.parentNode.style.top = e.clientY 'px'; <BR>거짓을 반환합니다. <BR>}, <BR>moveNodeByTimer:function () <BR>{ <BR>if(this.moveCounter>=0 && this.moveCounter<10) <BR>{ <BR>this.moveCounter = this.moveCounter 1 ; <BR>setTimeout('sortableDoubleUl.moveNodeByTimer()',this.timer); <BR>} <BR>if(this.moveCounter>=10) <br>{ <br>this.moveableUL.appendChild(this.srcLI); <br>} <br>}, <br>NodeMove:function(e) <br>{ <br>if(document.all)e = 이벤트; <br>//当前选中时间不到时不可移动 <br>if(sortableDoubleUl.moveCounter<10)return; <BR>if(document.all && sortableDoubleUl.moveCounter>=10 && e.button!=1 && navigator.userAgent.indexOf('Opera')==-1){ <br>alert("비微软&&超过移动时间"); <br>sortableDoubleUl.NodeStopMove(); <br>}<br>//현재 이동하려는 UL의 위치는 마우스 위치를 따릅니다.<br>sortableDoubleUl.moveableUL.parentNode.style.left = e.clientX 'px' <br>sortableDoubleUl.moveableUL.parentNode.style.top; = e.clientY 'px';//임시 변수는 마우스의 시작 Y축 위치를 저장합니다. <br>var tmpY = e.clientY <br>var tmpX = <br>sortableDoubleUl; insertDiv.style.display='none'; <br>sortableDoubleUl.descElement = false; <br>//window.status=tmpX ":" tmpY "ul1left:" leftPosArrangableNodes "|" (leftPosArrangableNodes widthArrangableNodes) "|" ( leftPosArrangableNodes2 widthArrangableNodes2); <br>if(tmpX>sortableDoubleUl.leftPosOfLeftUL&&tmpX<(sortableDoubleUl.leftPosOfLeftUL sortableDoubleUl.widthOfLeftUL)) <BR>{ <BR>var leftLI =sortableDoubleUl.leftUL.getElements ByT agName('LI'); <BR>sortableDoubleUl.insertDiv.style.left = (sortableDoubleUl.leftPosOfLeftUL sortableDoubleUl.offsetYInsertDiv) 'px'; <BR>for(var i=0;i<leftLI.length;i ) <BR>{ <BR>// LI의 TOP 위치를 가져옵니다. <BR>var topPos =sortableDoubleUl.getAbsoluteTopPos(leftLI[i]); <BR>//LI의 원래 높이를 가져옵니다.<BR>var tmpHeight = leftLI[i].offsetHeight; (i==0) <BR>{ <BR>if(tmpY<=topPos && tmpY>=topPos-5) <br>{ <br>sortableDoubleUl.insertDiv.style.top = (topPos sortableDoubleUl.offsetYInsertDiv) 'px '; <br>sortableDoubleUl.insertDiv.style.display = 'block'; <br>sortableDoubleUl.descElement = leftLI[i]; <br>sortableDoubleUl.insertAsFirstNode = <br>return; } <br>if(tmpY> ;=topPos && tmpY<=(topPos tmpHeight)) <BR>{ <BR>sortableDoubleUl.insertDiv.style.top = (topPos tmpHeight sortableDoubleUl.offsetYInsertDiv) 'px'; insertDiv.style.display = 'block'; <BR>sortableDoubleUl.insertAsFirstNode = leftLI[i]; <BR>sortableDoubleUl.descElement = leftLI[i]; <BR>insertAsFirstNode = <BR>} <BR>} <BR> } <BR>else if(tmpX>sortableDoubleUl.leftPosOfRightUL&&tmpX<(sortableDoubleUl.leftPosOfRightUL sortableDoubleUl.widthOfRightUL)) <BR>{ <BR>var rightLI =sortableDoubleUl.rightUL.getElementsByTagName( '리'); <BR> sortableDoubleUl.insertDiv.style.left =(sortableDoubleUl.leftPosOfRightUL sortableDoubleUl.offsetYInsertDiv) 'px' <BR>for(var i=0;i<rightLI.length;i ) <BR>{ <BR>// LI의 TOP 위치 가져오기<BR>var topPos =sortableDoubleUl.getAbsoluteTopPos(rightLI[i]); <BR>//LI의 원래 높이 가져오기<BR>var tmpHeight = rightLI[i].offsetHeight; (i==0) <BR> { <BR>if(tmpY<=topPos && tmpY>=topPos-5) <br>{ <br><br>sortableDoubleUl.insertDiv.style.top = (topPos sortableDoubleUl.offsetYInsertDiv ) 'px'; <br>sortableDoubleUl .insertDiv.style.display = 'block'; <br>sortableDoubleUl.descElement = rightLI[i]; <br>sortableDoubleUl.insertAsFirstNode = <br>return; <br>} <br>if( tmpY>=topPos && tmpY<=(topPos tmpHeight)) <br>{ <BR>sortableDoubleUl.insertDiv.style.top = (topPos tmpHeight sortableDoubleUl.offsetYInsertDiv) <BR>sortableDoubleUl.insertDiv.style.display = 'block'; <BR>sortableDoubleUl.descElement = rightLI[i]; <BR>sortableDoubleUl.insertAsFirstNode = false; <BR>} <BR> } <BR>else <BR>{ <BR>return; <BR>} <BR>}, <BR>ClearMoveNode:function() <BR>{ <BR>this.descElement = <BR>if(sortableDoubleUl; .moveableUL.getElementsByTagName('LI') .length>0) <br>{ <br>if(sortableDoubleUl.srcNextSibling) <br>this.srcUL.insertBefore(sortableDoubleUl.srcLI,sortableDoubleUl.srcNextSibling) <br>else sortableDoubleUl .srcUL.appendChild(sortableDoubleUl.srcLI) ; <br>} <br>}, <br>NodeStopMove:function(e) <br>{ <br>sortableDoubleUl.moveCounter = <br>sortableDoubleUl.insertDiv.style .display='none'; <br>//대상이 발견된 경우 <br>if(sortableDoubleUl.descElement) <br>{ <br>var parentUL=sortableDoubleUl.descElement.parentNode <br>var li = parentUL. getElementsByTagName('LI'); <br>if (sortableDoubleUl.descElement==li[0] && sortableDoubleUl.insertAsFirstNode) <br>{ <br>if(parentUL==sortableDoubleUl.rightUL) <br>{ <br>alert ("첫 번째 노드는 문서 초안이어야 합니다.") <br>sortableDoubleUl.ClearMoveNode(); <br>} <br>else <br>{ <br>parentUL.insertBefore(sortableDoubleUl.srcLI,sortableDoubleUl.descElement); 🎜>} <br>} <br>else <br>{ <br>if(sortableDoubleUl.descElement.nextSibling) <br>{ <br>parentUL.insertBefore(sortableDoubleUl.srcLI,sortableDoubleUl.descElement.nextSibling) <br>} <br>else <br>{ <br> if(parentUL==sortableDoubleUl.rightUL) <br>{ <br>sortableDoubleUl.ClearMoveNode() <br>alert("끝 노드는 전송된 공개 문서여야 합니다. ") <br><br>} <br>else <br> { <br>parentUL.appendChild(sortableDoubleUl.srcLI); <br>} <br>} <br>} <br>} <br>else <br>{ <br>//찾을 수 없음<br>alert(" 찾을 수 없음") <br>sortableDoubleUl.ClearMoveNode() <br>} <br>} <br>}; <br></script> <br><br></head> <br><본문> <br><h1> <br>아래 노드를 배열하세요</h1> <br><br><table style="border:#ccc 1px solid;"> <br><tr> <br><td style="width:2000px;border:#ccc 1px solid;"> <br><input id="Text1" style="너비:500px; 높이:300px;" 유형="텍스트" /> <br>sfsfa <br><br></td> <br><td style="width:400px; border:#ccc 1px solid;"> <br><div> <br><div style="padding: 5px"> <br><ul id="leftUL" style="height:500px; Overflow:auto;"> <br><li id="node1"> <br><img src="imagePre/0004.gif" style="height: 55px; width: 202px" /> <br></li> <br><li id="node2"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> <br><li id="node3"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> <br><li id="node4"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> <br><li id="node5"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> <br><li id="node6"> <img src="imagePre/0004.gif" style="height: 55px; width: 202px" /></li> <br></ul> <br></div> <br></div> <br></td> <br><td style="width:400px;width:400px; border:#ccc 1px solid;"> <br><ul id="rightUL" style="height:500px; Overflow:auto;"> <br><li id="Li1"> <br><div> <br>n11</div> <br></li> <br><li id="Li2">n12</li> <br><li id="Li3">n13</li> <br><li id="Li4">n14</li> <br><li id="Li5">n15</li> <br><li id="Li6">n16</li> <br></ul> <br></td> <br></tr> <br></테이블> <br></form> <br><br><div align="center"> <br>联系方式：QQ：492006183 <br>MSN：zhang-lizhi@hotmail.com <br><br></div> <br><script type="text/javascript"> <br><br>sortableDoubleUl.init() <br></script> <br></body> <br></html><br></leftli.length> </div>
