<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>
CopyRight © 2009-2014 分享查询网 Fx114.Net , All Rights Reserved. 辽ICP备14015563号-1
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。