可拖动的div

发布时间:2016-12-8 19:55:18 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"可拖动的div",主要涉及到可拖动的div方面的内容,对于可拖动的div感兴趣的同学可以参考一下。

<html > <head runat="server">     <title></title>     <script type="text/javascript">         var mouseX, mouseY;         var objX, objY;         var isDowm = false;  //是否按下鼠标         function mouseDown(obj, e) {             obj.style.cursor = "move";             objX = document.getElementById("divshow").offsetLeft;             objY = document.getElementById("divshow").offsetTop;             mouseX = e.clientX;             mouseY = e.clientY;             isDowm = true;         }         function mouseMove(e) {             var div = document.getElementById("divshow");             var x = e.clientX;             var y = e.clientY;             if (isDowm) {                 div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";                 div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";                 document.getElementById("span1").innerHTML = "x:" + div.style.top + "  " + "y:" + div.style.left;             }         }         function mouseUp(e) {             if (isDowm) {                 var x = e.clientX;                 var y = e.clientY;                 var div = document.getElementById("divshow");                 div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";                 div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";                 document.getElementById("span2").innerHTML = "x:" + div.style.top + "  " + "y:" + div.style.left;                 mouseX = x;                 rewmouseY = y;                 document.getElementById("divshow").style.cursor = "default";                 isDowm = false;             }         }     </script> </head> <body>     <span id="span1"></span></br><span id="span2"></span></br>     <div id="divshow" style="background-color: lightgray; border: 1px solid gray; height: 150px;         top: 100px; left: 100px; width: 300px; position: absolute;padding:5% 0 0 5%; " onmousedown="mouseDown(this,event)"         onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">         亲,我是可以拖动的哦!安全<br/>         哈哈...     </div> </body> </html>

上一篇:简单易用的div弹出层
下一篇:《经济半小时》 20130906 指尖上的商机(五)数据时代

相关文章

关键词: 可拖动的div

相关评论