JavaScript实现可拖拽的拖动层差异实例

本文实例讲述了Java脚本语言实现可拖拽的拖动层Div。分享给大家供大家参考。具体如下：

这是一个完美的射流研究…拖拽效果，带拖尾的Java脚本语言拖动层代码，经过了多次优化修正，复制节点的方法不错，值得射流研究…爱好者学习，同时代码修正了给拖拽元素加ondblclick事件无效的问题，兼容多种浏览器，拷贝代码即可运行使用。

运行效果如下图所示：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS ' * { margin :0；划水：0;} .div { width:100px高度：100 px位置：绝对；left:100pxtop:100px背景# CCC }/style/head body div class=' div '/div script type=' text/JavaScript ' var div=document。getelementsbytagname(' div ')[0]；var zIndex=6；拖动(div)；div。ondblclick=function(){ alert(' ok ')；};函数拖动(oDrag){ var DIsX=DIxy=0；奥德拉格。onmousedown=function(event){ var event=event | | window。事件；disX=事件。client x-这个。offsetleftdisY=事件。客户-这个。偏移顶部；var oTemp=this。克隆诺得(真)；文件。尸体。append child(OteMP)；文件。onmousemove=function(event){ var event=event | | window。事件；var iL=事件。客户端x-DIsX；var iT=事件。client y-DIsy；var MaxL=文档。文档元素。客户端宽度-odrag。在两者之间；var MaxT=文档。文档元素。客户端高度-odrag。偏移光线；iL=0(iL=0)；iT=0(iT=0)；iL=MaxL(iL=MaxL)；iT=MaxT(iT=MaxT)；奥特姆普。风格。zIndex=zIndexoTemp.style。不透明度=' 0.5 ';oTemp.style.filter='alpha(不透明度=50 ';奥特姆普。风格。left=iL ' px奥特姆普。风格。top=iT ' px返回false }；文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=nullodrag。风格。不透明度=OteMP。风格。不透明度；var arr={ left : otemp。offsetleft，top : otemp。offset top }；奥德拉格。风格。zindex=OteMP。风格。zindexoAnimate(oDrag，arr，300，function(){ document。尸体。移除子对象(OteMP)；});奥德拉格。释放捕获odrag。release capture()}；这个。设置捕获这个。setcapture()；返回false } }函数oAnimate(obj，params，time，handler){ var node=obj的类型==' string '？美元var _style=node.currentStyle？节点。currentstyle :窗口。getcomputedstyle(节点，null)；var handleFlag=true for(var p in params){(function(){ var n=p；if(n==' left ' | | n==' top '){ var _ old=ParSeint(_ style[n])；var _ new=ParSeint(params[n])；var _length=0，_ TT=10；if(！isNaN(_ old)){ var count=_ old；var length=_old=_new？(_ new-_ old):(_ old-_ new)；变化速度=长度/时间* _ TT；定义变量标志=0;var anim=setInterval(function(){ node。style[n]=count“px”；计数=_旧=_新？计数速度：计数速度；旗帜=_ TT；if(flag=time){ node。style[n]=_ new ' px '；clearInterval(anim)；if(handleFlag){ handler()；handleFlag=false} } }，TT)；} } })();} }/脚本/正文/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。