首页
所有分类
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 相关文章推荐
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
深入浅析React中diff算法
May 19 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
most_common(1) MIME(1) 爬虫(2) 写入策略(1) LOGO(1) binlog(2) Xpath(1) 抖音(1) pip(1) Counter(1)
You might like
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php生成无限栏目树
2017/03/16 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
jQuery的框架介绍
2016/05/11 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
JavaScript进阶（三）闭包原理与用法详解
2020/05/09 Javascript
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Scrapy框架使用的基本知识
2018/10/21 Python
机器学习实战之knn算法pandas
2019/06/22 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
python excel多行合并的方法
2020/12/09 Python
国际象棋商店：The Chess Store
2018/07/09 全球购物
瑞典最大的儿童用品网上商店：pinkorblue.se
2021/03/09 全球购物
面试必备的求职信
2014/05/25 职场文书
班级文化标语
2014/06/23 职场文书