<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload=function()
{
/*
过程:当鼠标按下是可以进行拖动
拖动鼠标时,div跟着动.
松开鼠标是,停止拖动.
1. px单位一定不要忘记加.
*/
var box=document.getElementById("box");
box.onmousedown=function(event)
{
event=event||window.event;
//取得div相对于鼠标位置的偏移量.注意这里不能使用box.sytle.left和box.style.top;
//因为style的属性的值是带单位的,当然可以使用intParse转换一下
//console.log(box.style.left+" "+box.offsetLeft);
var lef=event.clientX-box.offsetLeft;
var to=event.clientY-box.offsetTop;
document.onmousemove=function(event){
// alert(1);
event=event||window.event;
box.style.left=event.clientX-lef+"px";
box.style.top=event.clientY-to+"px";
}
box.onmouseup=function()
{
document.onmousemove=null;
}
}
}
</script>
<style>
#box{
width: 100px;
height: 100px;
position:absolute;
background-color: aqua;
}
</style>
</head>
<body>
这是一段文字
<div id="box"></div>
</body>
</html>
demo_js_鼠标拖动
最新推荐文章于 2023-10-10 17:38:43 发布