javaScript 实现鼠标拖动元素

一、前言

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

DEMO1：http://jsfiddle.net/Jj9qA/4/DEMO2:http://jsfiddle.net/gUYdg/1/

二、设计思路

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

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

三、源码实现细节

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

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

// 阻止区域文字被选中 for Chrome Firefox ie9e.PReventDefault();// for firefox ie9 || less than ie9window.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'});

完整程序源码：

$.fn.extend({    /**     *   Autor: 博客园华子yjh 2014/02/21     */    drag: function(options) {        var dragStart, dragMove, dragEnd,            $boundaryElem, limitObj;        function _initOptions() {            var noop = function(){}, defaultOptions;            defaultOptions = { // 默认配置项                boundaryElem: 'body' // 边界容器            };            options = $.extend( defaultOptions, options || {} );            $boundaryElem = $(options.boundaryElem);            dragStart = options.dragStart || noop,            dragMove = options.dragMove || noop,            dragEnd = options.dragEnd || noop;        }        function _drag(e) {            var clientX, clientY, offsetLeft, offsetTop,                $target = $(this), self = this;            limitObj = {                _left: 0,                _top: 0,                _right: ($boundaryElem.innerWidth() || $(window).width()) - $target.outerWidth(),                _bottom: ($boundaryElem.innerHeight() || $(window).height()) - $target.outerHeight()            };                        // 记录鼠标按下时的位置及拖动元素的相对位置            clientX = e.clientX;            clientY = e.clientY;            offsetLeft = this.offsetLeft;            offsetTop = this.offsetTop;                        dragStart.apply(this, arguments);            $(document).bind('mousemove', moveHandle)                        .bind('mouseup', upHandle);            // 鼠标移动事件处理            function moveHandle(e) {                var x = e.clientX - clientX + offsetLeft;                var y = e.clientY - clientY + offsetTop;                                $target.css({                    left: Math.max( Math.min(x, limitObj._right),  limitObj._left) + 'px',                    top: Math.max( Math.min(y, limitObj._bottom),  limitObj._top) + 'px'                });                dragMove.apply(self, arguments);                // 阻止浏览器默认行为(鼠标在拖动图片一小段距离，会出现一个禁止的小提示，即：图片不能再拖动)                e.preventDefault();            }            // 鼠标弹起事件处理            function upHandle(e) {                $(document).unbind('mousemove', moveHandle);                dragEnd.apply(self, arguments);            }        }        _initOptions(); // 初始化配置对象        $(this)        .css({ position: 'absolute' })        .each(function(){            $(this).bind('mousedown', function(e){                _drag.apply(this, [e]);                // 阻止区域文字被选中 for chrome firefox ie9                e.preventDefault();                // for firefox ie9 || less than ie9                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();            });        });        return this;    }});

实例调用：

// 调用实例(function(){    $('.drag-elem').drag({        boundaryElem: '#boundary',        dragStart: function(){            $(this).html('<span>准备拖动</span>').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });        },        dragMove: function(){            var pos = $(this).position();            $(this).html('<span>拖动中(' +  pos.left + ',' + pos.top + ')</span>' );        },        dragEnd : function(){            $(this).html('<span>拖动结束</span>');                    }    });}());

2014/03/02 源码更新及demo：

$.fn.extend({    /**     *   Autor: 博客园华子yjh update 2014/03/02     */    drag: function(options) {        var dragStart, dragMove, dragEnd,            $boundaryElem, b_width, b_height,            limitObj, isBeyond, diffX, diffY,            win_width = $(window).width(),            win_height = $(window).height();        function _initOptions() {            var noop = function(){}, defaultOptions;            defaultOptions = {          // 默认配置项                boundaryElem: 'body',   // 边界容器                isLimit: false          // 是否限制拖动范围            };            options = $.extend( defaultOptions, options || {} );            // 边界元素及其宽高            $boundaryElem = $(options.boundaryElem);            b_width = $boundaryElem.innerWidth();            b_height = $boundaryElem.innerHeight();            dragStart = options.dragStart || noop,            dragMove = options.dragMove || noop,            dragEnd = options.dragEnd || noop;        }        function _drag(e) {            var clientX, clientY, offsetLeft, offsetTop, width, height,                $target = $(this), self = this;                        // 记录鼠标按下时的位置及拖动元素的相对位置            clientX = e.clientX;            clientY = e.clientY;            offsetLeft = this.offsetLeft;            offsetTop = this.offsetTop;            width = $target.outerWidth();            height = $target.outerHeight();                        limitObj = {                _left: 0,                _top: 0,                _right: (b_width || win_width) - width,                _bottom: (b_height || win_height) - height            };                        // 拖动元素是否超出了限制边界            isBeyound = width > b_width && height > b_height;            if (isBeyound) {                diffX = b_width - width;                diffY = b_height - height;            }                        dragStart.apply(this, arguments);            $(document).bind('mousemove', moveHandle)                        .bind('mouseup', upHandle);            // 鼠标移动事件处理            function moveHandle(e) {                var e