<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>li <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="none"; <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>{ <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; <br>}, <br>cancelEvent:function (){return false},//イベントなし <br>getAbsoluteTopPos:function(srcObj)//获取制御子距離文档顶部の绝对位置 <br>{ <br>var returnValue = 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>else 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> false を返します。 <br>}, <br>moveNodeByTimer:function () <br>{ <br>if(this.moveCounter>=0 && this.moveCounter{ <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.moveCounterif(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'; <br>//一時変数はマウスの開始 Y 軸位置を保存します <br>var tmpX = e.clientX; insertDiv.style.display='none'; <br>sortableDoubleUl.descElement = false; <br>//window.status=tmpX ":" tmpY "ul1left:" leftPosArrangableNodes "|" (leftPosArrangableNodes widthArrangableNodes) "ul2left:" "|" ( leftPosArrangeableNodes2 widthArrangableNodes2); <br>if(tmpX>sortableDoubleUl.leftPosOfLeftUL&&tmpX<(sortableDoubleUl.leftPosOfLeftUL sortableDoubleUl.widthOfLeftUL)) <BR>var leftLI =sortableDoubleUl.leftUL.getElementsByT gName('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 <BR>if; (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 = 'ブロック'; <br>sortableDoubleUl.insertAsFirstNode = true; } <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>insertAsFirstNode = false; <BR>} <BR> } <BR>else if(tmpX>sortableDoubleUl.leftPosOfRightUL&&tmpX<(sortableDoubleUl.leftPosOfRightUL sortableDoubleUl.widthOfRightUL)) <BR>{ <BR>var rightLI =sortableDoubleUl.rightUL.getElementsByTagName('LI'); <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 <BR>if; (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.insertAsFirstNode = true; <br>} <br>if( tmpY>=topPos && tmpY<=(topPos tmpHeight)) <BR>{ <BR>sortableDoubleUl.insertDiv.style.top = (topPos tmpHeight sortableDoubleUl.offsetYInsertDiv) 'px'; >sortableDoubleUl.insertDiv.style.display = 'ブロック'; <BR>sortableDoubleUl.descElement = rightLI[i]; <BR>return; <BR>} } <br>else <br>{ <BR>return; <BR>} <BR>}, <BR>ClearMoveNode:function() <BR>{ <BR>this.descElement = false; .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 = -1; .display='none'; <br>//ターゲットが見つかった場合 <br>if(sortableDoubleUl.descElement) <br>{ <br>varparentUL=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> (「最初のノードはドキュメント ドラフトである必要があります」) <br>sortableDoubleUl.ClearMoveNode(); <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>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;" type="text" /> <br>sfsfa <br><br></td> <br><td style="width:400px; border:#ccc 1px Solid;"> <br><div> <br><div style="パディング: 5px"> <br><ul id="leftUL" style="height:500px; overflow:auto;"> <br><li id="node1"> <br><img src="imagePre/0004.gif" style="高さ: 55px; 幅: 202px" /> <br></li> <br><li id="node2"> <img src="imagePre/0004.gif" style="高さ: 55px; 幅: 202px" /></li> <br><li id="node3"> <img src="imagePre/0004.gif" style="高さ: 55px; 幅: 202px" /></li> <br><li id="node4"> <img src="imagePre/0004.gif" style="高さ: 55px; 幅: 202px" /></li> <br><li id="node5"> <img src="imagePre/0004.gif" style="高さ: 55px; 幅: 202px" /></li> <br><li id="node6"> <img src="imagePre/0004.gif" style="高さ: 55px; 幅: 202px" /></li> <br> <br> </div> <br> <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> <br></td> <br></tr> <br></table> <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> </tr> </h1></rightli.length-1></leftli.length> </ul> </ul> </div>
