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

简易拖拽以及bug的修复

2016-10-12 15:39 190 查看

1、拖拽的实现
我们将实现一个盒子在屏幕窗口随着鼠标按下跟随者鼠标指针移到，当鼠标松开将会静止不动；若再按下又可移动盒子。我们先准备盒子，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width: 200px;height: 200px;background: cornflowerblue;position: absolute;}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

js代码：

<script>
window.onload = function() {
var oBox = document.getElementById('box');

var DisX = 0;
var DisY = 0;

oBox.onmousedown = function(ev) {
var oEvent = ev || event;

DisX = oEvent.clientX - oBox.offsetLeft;
DisY = oEvent.clientY - oBox.offsetTop;

oBox.onmousemove = function(ev) {
var oEvent = ev || event;

oBox.style.left = oEvent.clientX - DisX + 'px';
oBox.style.top = oEvent.clientY - DisY + 'px';
};
};
};
</script>

2、修复bug
在上面我们已经可以把盒子进行拖动了，但是有没有发现盒子拖动之后就一直跟着指针移动，停不下来了，我们来处理下这个问题。

oBox.onmouseup=function  () {
oBox.onmousedown=null;
oBox.onmousemove=null;
};

我们在后面加了一个函数，就是在鼠标拖动之后将前面的两个函数置为null，那么就不会在鼠标松开之后在随着鼠标移动了。但是又有一个问题就是只能移动一次，像再次拖动盒子就不能了，是因为我们已经把前面两个事件都已经取消了，所以移动不了了，我们在改改，将下面有[1]后面的oBox改了，改为document。

<script>
window.onload = function() {
var oBox = document.getElementById('box');

var DisX = 0;
var DisY = 0;

oBox.onmousedown = function(ev) {
var oEvent = ev || event;

DisX = oEvent.clientX - oBox.offsetLeft;
DisY = oEvent.clientY - oBox.offsetTop;

[2]oBox.onmousemove = function(ev) {
var oEvent = ev || event;

oBox.style.left = oEvent.clientX - DisX + 'px';
oBox.style.top = oEvent.clientY - DisY + 'px';
};
[1]oBox.onmouseup = function() {
[1]oBox.onmousedown = null;
[2]oBox.onmousemove = null;
};
};
};
</script>

改好之后就可以正常的移动盒子了。但是有时候我们鼠标不避免会移动得很快，那问题就又出现了，当鼠标指针移到过快，盒子就会脱离指针，可以说成盒子移动的速度跟不上指针移动的速度，为什么会造成这个现象呢？我们可以想象我们现在要拖动盒子，但是鼠标指针的作用域就在盒子上面，如果我们把作用域变大，那么就是不是可以解决问题了。那就需要把上面有[2]的两个对象元素oBox也改为document，现在就可以实现盒子的拖动了。

现在我们就可以很好的移动盒子了，但是在往下拖动的时候，就有一个不美观的状态了，因为屏幕往下移动了，鼠标指针的参数超过了第一屏的大小了，所以就有不美观，那我们可以把盒子能移动得范围定在可视区域范围内，改变的代码如下：

<script>
window.onload = function() {
var oBox = document.getElementById('box');

var DisX = 0;
var DisY = 0;

oBox.onmousedown = function(ev) {
var oEvent = ev || event;

DisX = oEvent.clientX - oBox.offsetLeft;
DisY = oEvent.clientY - oBox.offsetTop;

document.onmousemove = function(ev) {
var oEvent = ev || event;
var left = oEvent.clientX - DisX
var top = oEvent.clientY - DisY

if(left < 0) {
left = 0
} else if(left > document.documentElement.clientWidth - oBox.offsetWidth) {
left = document.documentElement.clientWidth - oBox.offsetWidth;
}
if(top < 0) {
top = 0;
} else if(top > document.documentElement.clientHeight - oBox.offsetHeight) {
top = document.documentElement.clientHeight - oBox.offsetHeight;
}
oBox.style.top = top + 'px';
oBox.style.left = left + 'px';
}
document.onmouseup = function() {
document.onmousedown = null;
document.onmousemove = null;
};
return false;
};
};
</script>
在上面添加return false，处理某些浏览器的兼容性问题。

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

标签： 移动 bug javascript 拖拽鼠标指针事件

相关文章推荐

新的分享

章节导航