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

js实现简单拖拽案例

2017-11-05 02:00 399 查看

简单拖拽事件主要是监听三个事件：onmousedown, onmousemove, onmouseup 三个事件，思路也很简单，但是写的时候还是遇到了一些小问题，先放代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽事件案例</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#div{
width: 100px;
height: 100px;
position: relative;
left: 0;
top: 0;
background: #00a9e2;
font-size: 28px;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="div">
拖拽
</div>
</body>
<script>
var div = document.getElementById('div');
div.onmousedown = function (e) {
var startX = div.offsetLeft;
var startY = div.offsetTop;
var downX = e.clientX;
var downY = e.clientY;
document.onmousemove = function (e) {
var moveX = e.clientX;
var moveY = e.clientY;
div.style.left = (startX + moveX - downX) + 'px';
div.style.top = (startY + moveY - downY) + 'px';
};
document.onmouseup = function () {

a37d
document.onmousemove = null;
document.onmouseup = null;
}
};
</script>
</html>

说一下遇到的小问题：

1，开始没有获取startX，startY, 当第一次拖拽时正常，但是第二次就有问题了，点击后直接返回初始位置了，所以我们每次onmousedown时应该先获取startX,startY，在赋值拖拽位置时要加上

2，document.onmouseup写在了onmousedown函数的外面了，只能触发一次，第二次点击时，元素便不能停止拖拽了

3，注意offsetLeft,offsetTop是获取元素相对于元素最近有定位的父元素的left,top ，没有定位的父元素，则是获取相对于body的

4，clientX(Y) 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标(垂直坐标)

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

标签：

相关文章推荐

新的分享

章节导航