首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 05, 2009 
<!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：zhang-lizhi@hotmail.com 
</div> 
<script type="text/javascript"> 
sortableDoubleUl.init() 
</script> 
</body> 
</html>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
js只执行1次的函数示例
Jul 20 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
vue实现循环切换动画
Oct 17 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 #Javascript
jQuery toggle()设置CSS样式
Nov 05 #Javascript
javascript 打印内容方法小结
Nov 04 #Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 #Javascript
JavaScript 自动分号插入（JavaScript synat:auto semicolon insertion）
Nov 04 #Javascript
jQuery 加上最后自己的验证
Nov 04 #Javascript
javascript Math.random()随机数函数
Nov 04 #Javascript
openpyxl(1) 相对路径(1) hashlib(1) Pickle(1) logging(1) requests(1) 加密(1) 面向对象(3) hmac(1) 解密(1)
You might like
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
Jquery 1.9.1源码分析系列（十二）之筛选操作
2015/12/02 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
vue cli webpack中使用sass的方法
2018/02/24 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
Vue 嵌套路由使用总结（推荐）
2020/01/13 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python解析xml文件实例分享
2013/12/04 Python
Python模块的制作方法实例分析
2019/12/21 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
采购经理岗位职责
2014/02/16 职场文书
培训协议书范本
2014/04/22 职场文书
跑操口号
2014/06/12 职场文书
幼儿老师求职信
2014/06/30 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
2016公司年会主持词
2015/07/01 职场文书