原生JS实现鼠标拖动DIV
已被阅读 1305 次 | 文章分类:javascript | 2018-06-03 20:19
用JS实现可以在窗口内拖动DIV，其基本原理借助onmousedown、onmouseover、onmouseup事件实现交互
一:实现基本原理
实现的基本思路很简单，需将DIV的position属性设置为absolute,主要以下三步:
1.鼠标点击DIV执行onmousedown事件，激活拖动状态并且记录DIV的初始位置（DIV.offsetLeft,DIV.offsetY）和鼠标初始位置(e.pageX,e.pageY)
2.鼠标按下且移动时执行onmouseover事件，记录鼠标位置，和鼠标初始位置实时相减计算移动距离，DIV初始位置加上移动距离作为DIV的最后位置
3.鼠标松开执行onmouseup事件，禁止拖动状态
二:实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.move{
width:400px;height:400px;
margin:0 auto;
border:1px solid red;
position: absolute;left:200px;top:200px;
}
.move_header{
height:50px;line-height:50px;
text-align: center;background-color: peru;
cursor: pointer;
}
</style>
</head>
<body>
<div id=move>
<div id="move_header_js">
拖曳
</div>
<div>
内容
</div>
</div>
<script>
function get(id)
{
return document.getElementById(id);
}
</script>
<script>
var mouseoffsetX=0;
var mouseoffsetY=0;
var startX=0;
var startY=0;
var isDraging=false;
get("move_header_js").addEventListener("mousedown",function(e){
var e=e||window.event;
startX=get("move").offsetLeft,
startY=get("move").offsetTop;
mouseoffsetX=e.pageX-startX;//鼠标初始位置
mouseoffsetY=e.pageY-startY;
isDraging=true;
})
document.onmousemove=function(){
var e=e||window.event;
var movex=0;
var movey=0;
if(isDraging==true){
moveX=e.pageX-startX-mouseoffsetX;//鼠标移动位移
moveY=e.pageY-startY-mouseoffsetY;
endX=moveX+startX;
endY=moveY+startY;
get("move").style.left=endX+"px";
get("move").style.top=endY+"px"
console.log(moveX,moveY)
}
}
document.onmouseup=function(){
isDraging=false;
}
</script>
</body>
</html>
三:效果
