首页
所有分类
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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
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
Athens(1) iPhone(1) 嘧啶碱基(2) iOS16(1) compose(3) 陨石(1) iOS15(1) iOS(1) DNA(2) RNA(2)
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
javascript 广告后加载，加载完页面再加载广告
2010/11/25 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jquery UI Datepicker时间控件的使用方法（终结版）
2015/11/07 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python中lambda()的用法
2017/11/16 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python中format函数如何使用
2020/06/22 Python
HTML5进度条特效
2014/12/18 HTML / CSS
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
大学生的应聘自我评价
2013/12/13 职场文书
综治维稳工作汇报
2014/10/27 职场文书
检讨书模板
2015/01/29 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
解析redis hash应用场景和常用命令
2021/08/04 Redis
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers