JQuery の並べ替え可能な効果を模倣します。コードは間違っていますが、look_javascript のスキルを身につける価値があります。

コードをコピー コードは次のとおりです: 模仿JQuery sortable效結果 ul { 幅 :200px; リストスタイルタイプ:なし; マージン:0px; パディング:0px; } li { 高さ: 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="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)//获取制御件距離文档底部の绝对位置 { //如果父元素の位置不是相対的または絶対就会一直向上找直体 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; else sortableDoubleUl.srcNextSibling = false; sortableDoubleUl.moveNodeByTimer(); sortableDoubleUl.moveableUL.parentNode.style.left = e.clientX 'px'; sortableDoubleUl.moveableUL.parentNode.style.top = e.clientY 'px'; 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 = イベント; //当前選択期間中は移動不可 if(sortableDoubleUl.moveCounterif(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 tmpX = e.clientX; insertDiv.style.display='none'; sortableDoubleUl.descElement = false; //window.status=tmpX ":" tmpY "ul1left:" leftPosArrangableNodes "|" (leftPosArrangableNodes widthArrangableNodes) "ul2left:" "|" ( leftPosArrangeableNodes2 widthArrangableNodes2); if(tmpX>sortableDoubleUl.leftPosOfLeftUL&&tmpX var leftLI =sortableDoubleUl.leftUL.getElementsByT gName('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 if; (i==0) { if(tmpY =topPos-5) { sortableDoubleUl.insertDiv.style.top = (topPos sortableDoubleUl.offsetYInsertDiv) 'px '; sortableDoubleUl.insertDiv.style.display = 'ブロック'; sortableDoubleUl.insertAsFirstNode = true; } if(tmpY&gt ;=topPos && tmpY { sortableDoubleUl.insertDiv.style.top = (topPos tmpHeight sortableDoubleUl.offsetYInsertDiv) 'px'; insertDiv.style.display = ' block'; sortableDoubleUl.insertAsFirstNode = leftLI[i]; insertAsFirstNode = false; } } 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 { // LI の TOP 位置を取得します var topPos =sortableDoubleUl.getAbsoluteTopPos(rightLI[i]) //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.insertAsFirstNode = true; } if( tmpY>=topPos && tmpY { sortableDoubleUl.insertDiv.style.top = (topPos tmpHeight sortableDoubleUl.offsetYInsertDiv) 'px'; >sortableDoubleUl.insertDiv.style.display = 'ブロック'; sortableDoubleUl.descElement = rightLI[i]; return; } } else { return; } }, ClearMoveNode:function() { this.descElement = false; .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; .display='none'; //ターゲットが見つかった場合 if(sortableDoubleUl.descElement) { varparentUL=sortableDoubleUl.descElement.parentNode; var li =parentUL. getElementsByTagName('LI'); if (sortableDoubleUl.descElement==li[0] && sortableDoubleUl.insertAsFirstNode) { if(parentUL==sortableDoubleUl.rightUL) { (「最初のノードはドキュメント ドラフトである必要があります」) 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 のスキルを身につける価値があります。

以下のノードを配置します

関連記事