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

집

웹 프론트엔드

JS 튜토리얼

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

May 16, 2016 pm 06:42 PM

jquery

코드 복사 코드는 다음과 같습니다.

<!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"> 
<머리> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<제목> 
模仿JQuery sortable效果 
</title> 
<style type="text/css"> 
ul 
{ 
너비 :200px; 
목록 스타일 유형:없음; 
여백:0px; 
패딩:0px; 
} 
리 
{ 
높이: 100px; 너비: 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="절대"; 
document.body.appendChild(moveableDiv); 
this.moveableUL =moveableUL; 
var insertDiv=document.createElement("DIV"); 
insertDiv.style.position="절대"; 
insertDiv.style.display="없음"; 
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[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; <… = 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; 
그 외 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<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 = 이벤트; 
//当前选中时间不到时不可移动 
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 = 
sortableDoubleUl; insertDiv.style.display='none'; 
sortableDoubleUl.descElement = false; 
//window.status=tmpX ":" tmpY "ul1left:" leftPosArrangableNodes "|" (leftPosArrangableNodes widthArrangableNodes) "|" ( leftPosArrangableNodes2 widthArrangableNodes2); 
if(tmpX>sortableDoubleUl.leftPosOfLeftUL&&tmpX<(sortableDoubleUl.leftPosOfLeftUL sortableDoubleUl.widthOfLeftUL)) 
{ 
var leftLI =sortableDoubleUl.leftUL.getElements ByT agName('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; (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 = 
return; } 
if(tmpY&gt ;=topPos && tmpY<=(topPos tmpHeight)) 
{ 
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<(sortableDoubleUl.leftPosOfRightUL sortableDoubleUl.widthOfRightUL)) 
{ 
var rightLI =sortableDoubleUl.rightUL.getElementsByTagName( '리'); 
 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; (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 = 
return; 
} 
if( tmpY>=topPos && tmpY<=(topPos tmpHeight)) 
{ 
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() 
} 
} 
}; 
</script> 

</head> 
<본문> 
<h1> 
아래 노드를 배열하세요</h1> 

<table style="border:#ccc 1px solid;"> 
<tr> 
<td style="width:2000px;border:#ccc 1px solid;"> 
<input id="Text1" style="너비:500px; 높이:300px;" 유형="텍스트" /> 
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> 
</테이블> 
</form> 

<div align="center"> 
联系方式：QQ：492006183 
MSN：zhang-lizhi@hotmail.com 

</div> 
<script type="text/javascript"> 

sortableDoubleUl.init() 
</script> 
</body> 
</html>