DOM元素四向拖动的基本实现

摘要: 一个浮动框，可以通过鼠标或触摸四向拖动

一般弹框都是固定居中（或顶部、底部）显示的，最近碰到了这样的考题，觉得有趣，所以记录下来。

首先，假定我们拖动一个蓝色的方块：

#box {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
}

当鼠标左键按下时，它进入可拖动状态，然后随着鼠标移动而移动，当鼠标松开时，停止移动。

用到的事件是

mousedown

，

mousemove

，

mouseup

，代码如下：

function movingbox(elem) {
var moving = false;
var x, y;
elem.onmousedown = function(e) {
moving = true;
// 因为css里没定义left和top，所以初始置0，避免其跳到左上角
x = elem.style.left ? e.pageX - parseInt(elem.style.left) : 0;
y = elem.style.top ? e.pageY - parseInt(elem.style.top) : 0;
elem.style.cursor = 'move';
};
// 侦听document的mousemove和mouseup事件，这样当鼠标快速移动时，也能正确响应
document.addEventListener('mousemove', function(e) {
if (moving) {
elem.style.left = e.pageX - x + 'px';
elem.style.top = e.pageY - y + 'px';
}
}, false);
document.addEventListener('mouseup', function() {
if (moving) {
moving = false;
elem.style.cursor = 'inherit';
}
}, false);
}

movingbox(document.getElementById('box'));

对于触屏设备，将相应的事件换成

touchstart

，

touchmove

，

touchend

即可。

多年以前，刚会点js，做过同样的功能，写得巨复杂，反复改了很久。现在梳理下，其实很简单，这就是进步吧，哈哈!