管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

模仿JQuery sortable效果 代码有错但值得看看

复制代码 代码如下:

　　<!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">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

　　<title>

　　模仿JQuery sortable效果

　　</title>

　　<style type="text/css">

　　ul

　　{

　　width :200px;

　　list-style-type:none;

　　margin:0px;

　　padding:0px;

　　}

　　li

　　{

　　height: 100px; width: 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="absolute";

　　document.body.appendChild(moveableDiv);

　　this.moveableUL =moveableUL;

　　var insertDiv=document.createElement("DIV");

　　insertDiv.style.position="absolute";

　　insertDiv.style.display="none";

　　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.length;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;

　　},

　　cancelEvent:function (){return false},//无事件

　　getAbsoluteTopPos:function(srcObj)//获取控件距文档顶部的绝对位置

　　{

　　var returnValue = srcObj.offsetTop;

　　while((srcObj = srcObj.offsetParent) != null)

　　{

　　returnValue += srcObj.offsetTop;

　　}

　　return returnValue;

　　},

　　getAbsoluteLeftPos:function(srcObj)//获取控件距文档底部的绝对位置

　　{

　　//如果父元素的position不是relative或absolute就会一直向上找直到body

　　var returnValue = srcObj.offsetLeft;

　　while((srcObj = srcObj.offsetParent) != null)

　　{

　　returnValue += srcObj.offsetLeft;

　　}

　　return returnValue;

　　},

　　initMoveNode:function(e)//当鼠标按下LI时初始化LI节点

　　{

　　//clearMovableDiv();

　　if(document.all)

　　{

　　e = event;

　　}

　　//每次初始化节点时将其清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';

　　return false;

　　},

　　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 = event;

　　//当前选中时间不到时不可移动

　　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 = e.clientX;

　　sortableDoubleUl.insertDiv.style.display='none';

　　sortableDoubleUl.descElement = false;

　　//window.status=tmpX+":"+tmpY+"ul1left:"+leftPosArrangableNodes+"|"+(leftPosArrangableNodes + widthArrangableNodes)+"ul2left:"+leftPosArrangableNodes2+"|"+(leftPosArrangableNodes2+widthArrangableNodes2);

　　if(tmpX>sortableDoubleUl.leftPosOfLeftUL&&tmpX<(sortableDoubleUl.leftPosOfLeftUL +sortableDoubleUl.widthOfLeftUL))

　　{

　　var leftLI =sortableDoubleUl.leftUL.getElementsByTagName('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;

　　if(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 = true;

　　return;

　　}

　　}

　　if(tmpY>=topPos && tmpY<=(topPos+tmpHeight))

　　{

　　sortableDoubleUl.insertDiv.style.top = (topPos+tmpHeight +sortableDoubleUl.offsetYInsertDiv) + 'px';

　　sortableDoubleUl.insertDiv.style.display = 'block';

　　sortableDoubleUl.insertAsFirstNode = leftLI[i];

　　sortableDoubleUl.descElement = leftLI[i];

　　insertAsFirstNode = false;

　　return;

　　}

　　}

　　}

　　else if(tmpX>sortableDoubleUl.leftPosOfRightUL&&tmpX<(sortableDoubleUl.leftPosOfRightUL +sortableDoubleUl.widthOfRightUL))

　　{

　　var rightLI =sortableDoubleUl.rightUL.getElementsByTagName('LI');

　　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;

　　if(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 = true;

　　return;

　　}

　　}

　　if(tmpY>=topPos && tmpY<=(topPos+tmpHeight))

　　{

　　sortableDoubleUl.insertDiv.style.top = (topPos+tmpHeight +sortableDoubleUl.offsetYInsertDiv) + 'px';

　　sortableDoubleUl.insertDiv.style.display = 'block';

　　sortableDoubleUl.descElement = rightLI[i];

　　sortableDoubleUl.insertAsFirstNode = false;

　　return;

　　}

　　}

　　}

　　else

　　{

　　return;

　　}

　　},

　　ClearMoveNode:function()

　　{

　　this.descElement = false;

　　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 = -1;

　　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>

　　<body>

　　<h1>

　　Arrange the nodes below</h1>

　　<table style="border:#ccc 1px solid;">

　　<tr>

　　<td style="width:2000px;border:#ccc 1px solid;">

　　<input id="Text1" style="width:500px; height:300px;" type="text" />

　　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>

　　</table>

　　</form>

　　<div align="center">

　　联系方式：QQ：492006183

　　MSN：[email protected]

　　</div>

　　<script type="text/javascript">

　　sortableDoubleUl.init()

　　</script>

　　</body>

　　</html>

教程首页 更多教程