JQuery 정렬 가능 효과를 모방합니다. 코드가 잘못되었지만 look_javascript 기술을 사용할 가치가 있습니다.

코드 복사 코드는 다음과 같습니다. 模仿JQuery sortable效果 ul { 너비 :200px; 목록 스타일 유형:없음; 여백:0px; 패딩:0px; } 리 { 높이: 100px; 너비: 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="절대"; document.body.appendChild(moveableDiv); this.moveableUL =moveableUL; var insertDiv=document.createElement("DIV"); insertDiv.style.position="절대"; insertDiv.style.display="없음"; 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; while((srcObj = srcObj.offsetParent) != null) { returnValue = srcObj.offsetTop; } return returnValue; }, getAbsoluteLeftPos:function(srcObj)//获取控件距文档底부적绝对位置 { //如果父元素의 위치는 상대적인 위치가 아니며 절대적인 위치가 아닙니다.向上找直到본체 var returnValue = srcObj.offsetLeft; while((srcObj = srcObj.offsetParent) != null) { returnValue = srcObj.offsetLeft; } return returnValue; }, initMoveNode:function(e)//当鼠标按下LI时初始化LI节点 { //clearMovableDiv(); if(document.all) { e = 이벤트; } //每次初始化节点时将其清0 sortableDoubleUl.moveCounter=0; sortableDoubleUl.srcLI=this; sortableDoubleUl.srcUL=this.parentNode; if(this.nextSibling) sortableDoubleUl.srcNextSibling =this.nextSibling; 그 외 sortableDoubleUl.srcNextSibling = false; sortableDoubleUl.moveNodeByTimer(); sortableDoubleUl.moveableUL.parentNode.style.left = e.clientX 'px'; sortableDoubleUl.moveableUL.parentNode.style.top = e.clientY 'px'; 거짓을 반환합니다. }, 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 = 이벤트; //当前选中时间不到时不可移动 if(sortableDoubleUl.moveCounter 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 = sortableDoubleUl; insertDiv.style.display='none'; sortableDoubleUl.descElement = false; //window.status=tmpX ":" tmpY "ul1left:" leftPosArrangableNodes "|" (leftPosArrangableNodes widthArrangableNodes) "|" ( leftPosArrangableNodes2 widthArrangableNodes2); if(tmpX>sortableDoubleUl.leftPosOfLeftUL&&tmpX { var leftLI =sortableDoubleUl.leftUL.getElements ByT agName('LI'); sortableDoubleUl.insertDiv.style.left = (sortableDoubleUl.leftPosOfLeftUL sortableDoubleUl.offsetYInsertDiv) 'px'; for(var i=0;i { // LI의 TOP 위치를 가져옵니다. var topPos =sortableDoubleUl.getAbsoluteTopPos(leftLI[i]); //LI의 원래 높이를 가져옵니다. var tmpHeight = leftLI[i].offsetHeight; (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 = return; } if(tmpY&gt ;=topPos && tmpY { sortableDoubleUl.insertDiv.style.top = (topPos tmpHeight sortableDoubleUl.offsetYInsertDiv) 'px'; insertDiv.style.display = 'block'; sortableDoubleUl.insertAsFirstNode = leftLI[i]; sortableDoubleUl.descElement = leftLI[i]; insertAsFirstNode = } } } else if(tmpX>sortableDoubleUl.leftPosOfRightUL&&tmpX { var rightLI =sortableDoubleUl.rightUL.getElementsByTagName( '리'); sortableDoubleUl.insertDiv.style.left =(sortableDoubleUl.leftPosOfRightUL sortableDoubleUl.offsetYInsertDiv) 'px' for(var i=0;i { // LI의 TOP 위치 가져오기 var topPos =sortableDoubleUl.getAbsoluteTopPos(rightLI[i]); //LI의 원래 높이 가져오기 var tmpHeight = rightLI[i].offsetHeight; (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 = return; } if( tmpY>=topPos && tmpY { sortableDoubleUl.insertDiv.style.top = (topPos tmpHeight sortableDoubleUl.offsetYInsertDiv) sortableDoubleUl.insertDiv.style.display = 'block'; sortableDoubleUl.descElement = rightLI[i]; sortableDoubleUl.insertAsFirstNode = false; } } else { return; } }, ClearMoveNode:function() { this.descElement = 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 = 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() } } }; 아래 노드를 배열하세요 sfsfa n11 n12 n13 n14 n15 n16 联系方式：QQ：492006183 MSN：zhang-lizhi@hotmail.com sortableDoubleUl.init()

JQuery 정렬 가능 효과를 모방합니다. 코드가 잘못되었지만 look_javascript 기술을 사용할 가치가 있습니다.

아래 노드를 배열하세요

관련 기사