首页
所有分类
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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
javascript实现粘贴qq截图功能（clipboardData）
May 29 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
JavaScript门道之标准库
May 26 Javascript
layui表格分页 记录勾选的实例
Sep 02 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
OutputStream(1) vuex(1) 本地化存储(1) persistedstate(1) click(1) HashSet集合(1) Set接口(1) Storage(1) Vue(10) 自定义组件(1)
You might like
php 常用类整理
2009/12/23 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php学习笔记之面向对象
2014/11/08 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JS求平均值的小例子
2013/11/29 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
实习生自我鉴定
2013/12/12 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
校园广播稿500字
2014/02/04 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
留守儿童工作方案
2014/06/02 职场文书
医院标语大全
2014/06/23 职场文书
高中综合实践活动总结
2014/07/07 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
js之ajax文件上传
2021/05/13 Javascript
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
Elasticsearch 数据类型及管理
2022/04/19 Python