<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<script type="text/javascript">
var draggable = false;
var offsetX = 0;
var offsetY = 0;
window.onload = function(){
var div01 = document.getElementById("div01");
div01.style.position="absolute";
div01.onmousedown = function () {
draggable = true;
offsetY = event.clientY - div01.offsetTop;
offsetX = event.clientX - div01.offsetLeft;
}
div01.onmouseup = function () {
draggable = false;
}
div01.onmousemove = function () {
if(draggable){
this.style.left = event.clientX - offsetX + "px";
this.style.top = event.clientY - offsetY + "px";
}
}
div01.onmouseout = function () {
draggable = false;
}
}
</script>
</head>
<body>
<div id="div01" style="width:300px; height:185px;background-color: lightgray"></div>
</body>
</html>
Dom 可拖动div
最新推荐文章于 2022-07-08 20:32:20 发布