JavaScript 实现鼠标拖动元素实例代码

一、前言

最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点，用于固定定位，然后在复制HTML，粘贴在页面的开发代码中，就是这么一个功能，实现了很多遍，都没有做好，不得已采用了jQuery.fn.draggable插件，在接触一些资料和别人的思路，今天终于把这个拖动功能给完善了，下面就来看看它的实现

 
二、设计思路

在拖动元素上绑定鼠标按下事件，在文档对象中绑定鼠标移动，鼠标弹起事件；
为什么不把三个事件都绑定在拖动元素上，这是因为鼠标移动太快时，鼠标移动和弹起事件处理程序将不会执行

代码如下:
$target.bind('mousedown', fn);

$(document)
.bind('mousemove', fn)
.bind('mouseup', fn);

三、源码实现细节

在实现源码中有很多需要值得注意的地方：

1、首先在鼠标按下事件中，当单击拖动元素中，可能会选择区域文字，这并不是我们所需要的，解决方法如下：

代码如下:
// 阻止区域文字被选中 for chrome firefox ie9
e.preventDefault();
// for firefox ie9 || less than ie9
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

2、如果拖动元素是图片(img标签)，鼠标在拖动图片一小段距离，会出现一个禁止的小提示，即：图片不能再拖动，
这是浏览器的默认行为，因此只要阻止浏览器默认行为就可以了

代码如下:
e.preventDefault();

3、关于边界(处理拖动范围)的问题

一开始实现的代码如下：

代码如下:
// x,y代表拖动元素将要设置的left,top值，limitObj为拖动区域范围对象，测试时就发现问题，
// 在拖动过程中，拖动对象有时不能直接靠近边界

if ( x >= limitObj._left && x <= limitObj._right ) {
    $target.css({ left: x + 'px' });
}
if ( y >= limitObj._top && y <= limitObj._bottom ) {
    $target.css({ top: y + 'px' });
}

进一步思考：为什么会出现上面问题，原因在于变量x可能会小于limitObj._left或大于limitObj._right，变量y同理，
因此代码需要像下面这样处理：

代码如下:
if (x < limitObj._left) {
    x = limitObj._left;
}
if (x > limitObj._right) {
    x = limitObj._right;
}
if (y < limitObj._top) {
    y = limitObj._top;
}
if (y > limitObj._bottom) {
    y = limitObj._bottom;
}
$target.css({ left: x + 'px', top: y + 'px' });

终于解决了这个问题，但是cloudgamer给出了更好的写法：

代码如下:
$target.css({
    left: Math.max( Math.min(x, limitObj._right),  limitObj._left) + 'px',
    top: Math.max( Math.min(y, limitObj._bottom),  limitObj._top) + 'px'