本文实例讲述了JS实现网页Div层Clone拖拽效果。分享给大家供大家参考。具体如下:
这是一个层拖动,网页上的拖拽Clone效果实例,两个层可在鼠标的拖动下,任意改变位置,智能判断层级,也就是智能判断自身是否处于最高层,最高处的层是不会被其它层遮挡的。
运行效果截图如下:
在线演示地址如下:
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/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拖拽--Clone</title> <style type="text/css"> body,div{margin:0;padding:0;} body{background:#3e3e3e;} div{position:absolute;width:100px;height:100px;cursor:move;border:1px solid #888;background:#000;} #drag1{top:100px;left:100px;} #drag2{top:100px;left:300px;} #temp{opacity:0.3;filter:alpha(opacity=30);} </style> <script type="text/javascript"> var zIndex = 1; window.onload = function () { var oDrag1 = document.getElementById("drag1"); var oDrag2 = document.getElementById("drag2"); drag(oDrag1); drag(oDrag2); }; function drag(oDrag) { var disX = dixY = 0; oDrag.onmousedown = function (event) { var event = event || window.event; disX = event.clientX - this.offsetLeft; disY = event.clientY - this.offsetTop; var oTemp = document.createElement("div"); oTemp["id"] = "temp"; oTemp.style.left = this.currentStyle "left"] : getComputedStyle(this, null)["left"]; oTemp.style.top = this.currentStyle "top"] : getComputedStyle(this, null)["top"]; oTemp.style.zIndex = zIndex++; document.body.appendChild(oTemp); document.onmousemove = function (event) { var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var maxL = document.documentElement.clientWidth - oDrag.offsetWidth; var maxT = document.documentElement.clientHeight - oDrag.offsetHeight iL <= 0 && (iL = 0); iT <= 0 && (iT = 0); iL >= maxL && (iL = maxL); iT >= maxT && (iT = maxT); oTemp.style.left = iL + "px"; oTemp.style.top = iT + "px"; return false; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; oDrag.style.left = oTemp.style.left; oDrag.style.top = oTemp.style.top; oDrag.style.zIndex = oTemp.style.zIndex; document.body.removeChild(oTemp); oDrag.releaseCapture && oDrag.releaseCapture() }; this.setCapture && this.setCapture(); return false } } </script> </head> <body> <div id="drag1"></div> <div id="drag2"></div> </body> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 王菲.2006《菲常好听》引进版[低速原抓WAV+CUE]
- 《三日危情独家的记忆》女角色介绍
- 《天国拯救》拉泰比武大会攻略
- 任天堂推出《马里奥惊奇》NS捆绑包 10月24日发售
- 《孤岛惊魂》能否逆转育碧颓势?曝系列新作正招兵买马
- 天命人呼叫战术轰炸!玩家自制《黑神话:悟空》轰炸机Mod
- 群星.1992-滚石九大天王·十二出好戏【滚石】【WAV+CUE】
- 群星.1994-新滚石九大天王之年度大丫滚石】【WAV+CUE】
- 坣娜.1998-别恋【非常喜】【WAV+CUE】
- 《草原经典 最炫草原风 2CD》[WAV/分轨][980MB]
- 《不烧不选 经典国语极品珍藏》[WAV/分轨][500MB]
- 《绝对主打 流行原创金曲 2CD》[WAV分轨][1.1GB]
- 《赛博朋克2077》更新上线:支持AMD FSR3
- 《塞尔达传说:智慧的再现》提前半个月偷跑,引发玩家担忧
- 战锤40K星际战士2全职业介绍|全职业技能效果一览