JS实现网页差异层克隆拖拽效果

本文实例讲述了射流研究…实现网页差异层克隆拖拽效果。分享给大家供大家参考。具体如下：

这是一个层拖动，网页上的拖拽克隆效果实例，两个层可在鼠标的拖动下，任意改变位置，智能判断层级，也就是智能判断自身是否处于最高层，最高处的层是不会被其它层遮挡的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-draw-box-clone-style-codes/

！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拖拽-克隆/标题样式类型=' text/CSS '正文，div { margin:0划水：0;} body { background : # 3e3e 3 e } div { position : absolute宽度宽度：100像素高度：100 pxcursor : moveborder 33601 px固体# 888;背景技术： # 000;} # drag 1 { top :100 pxleft :100 px } # drag 2 { top :100 pxleft 3360300 px } # temp { opa city 33600.3 filter : alpha(不透明度=30);}/style脚本类型=' text/JavaScript ' var zIndex=1；窗户。onload=function(){ var odrag 1=document。getelementbyid('拖动1 ')；var odrag 2=文档。getelementbyid('拖动2 ')；拖动(odrag 1)；阻力(odrag 2)；};函数拖动(oDrag){ var DIsX=DIxy=0；奥德拉格。onmousedown=function(event){ var event=event | | window。事件；disX=事件。client x-这个。offsetleftdisY=事件。客户-这个。偏移顶部；var OteMP=文档。create element(' div ')；oteMP[' id ']=' temp '；奥特姆普。风格。左=这个。当前样式？这个。current style[' left ']: getComputedStyle(this，null)[' left ']；奥特姆普。风格。top=这个。当前风格？这个。current style[' top ']: getComputedStyle(this，null)[' top ']；奥特姆普。风格。zIndex=zIndex文件。尸体。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。offset thight ILl=0(ILl=0)；iT=0(iT=0)；iL=MaxL(iL=MaxL)；iT=MaxT(iT=MaxT)；奥特姆普。风格。left=iL ' px奥特姆普。风格。top=iT ' px返回false }；文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=nullodrag。风格。left=OteMP。风格。向左；奥德拉格。风格。top=OteMP。风格。顶部；奥德拉格。风格。zindex=OteMP。风格。zindex文件。尸体。移除子对象(OteMP)；奥德拉格。释放捕获odrag。release capture()}；这个。设置捕获这个。setcapture()；返回false } }/脚本/标题dydiv id='拖动1 '/div div id='拖动2 '/div/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。