您的位置：首页 > Web前端 > JavaScript

JS 实现div元素的拖动

2017-08-13 15:35 537 查看

JS 实现div元素的拖动

功能描述：

在浏览器窗口有一个div盒子，用鼠标点击盒子，按下进行拖动，当鼠标弹起时，该div就移动到此位置了。

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
//全局变量，标记是否鼠标按下
var isMouseDown=false;
//全局div
var div;
var leftX=0;
var topY=0;

window.onload=function(){

//增加鼠标按下事件
div=document.getElementById("div1");

div.onmousedown=mouseDownAction;
document.onmousemove=mouseMoveAction;
div.onmouseup=mouseUpAction;
}
/**
*鼠标按下
*/
function mouseDownAction(e){
isMouseDown=true;
//记录下鼠标点击的时候的位置
leftX= e.offsetX;
topY= e.offsetY;
}
/**
*鼠标移动
*/
function mouseMoveAction(e){

if(isMouseDown){
div.style.left= e.pageX-leftX+"px";
div.style.top= e.pageY-topY+"px";
}
}
/**
*鼠标弹起来
*/
function mouseUpAction(e){
isMouseDown=false;
}
</script>
</head>
<body>
<div class="div1" id="div1"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航