可以拖动的div
<!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" "mouseDown(this,event)" "mouseMove(event)" "mouseUp(event)"></div>
</body>
</html>
刚好需要 ,赶紧记录下来
https://blog.csdn.net/java_wht/article/details/72896132
2442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
