无论如何，先感谢一下我的同事，而且还是妹子，为了帮我，给我写了一个这个可拖动的div的代码，所有的代码都是用hbuilder工具写的，工具可以自己去百度搜索。
这个是给我基础测试题的哪个实习生教我的，我的思路一直在增加监听事件哪块。但是，别人一说我突然恍然大悟，原来还是可以通过事件绑定到对应的js就可以了,，感觉自己的思路不对，解决问题的思路不对，很多事情要做过之后才能懂，其实很多时候看书就是通过简单的代码了解一个思维逻辑，然后加以引用而已。
<!DOCTYPE html> <html> <head runat="server"> <title></title> <style> #mov{ background-color: #00DDCC; width: 200px; height: 200px; top: 100px; left: 100px; position: absolute; } </style> <script> var mouseX, mouseY; var objX, objY; var isDowm = false; function mouseDown(obj, e) { var div = document.getElementById("mov"); obj.style.cursor = "move"; objX = div.offsetLeft; objY = div.offsetTop; mouseX = e.clientX; mouseY = e.clientY; isDowm = true; } function mouseMove(e) { var div = document.getElementById("mov"); 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"; } } function mouseUp(e) { if (isDowm) { var x = e.clientX; var y = e.clientY; var div = document.getElementById("mov"); div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px"; div.style.cursor = "default"; isDowm = false; } } </script> </head> <body> <div id="mov" οnmοusedοwn="mouseDown(this,event)" οnmοusemοve="mouseMove(event)" οnmοuseup="mouseUp(event)"></div> </body> </html>
