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 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' });
完整程序源码：
$.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_diffX = e.clientX - clientX, e_diffY = e.clientY - clientY, x = e_diffX + offsetLeft, y = e_diffY + offsetTop; if (options.isLimit && !isBeyound) { x = Math.max( Math.min(x, limitObj._right), limitObj._left ); y = Math.max( Math.min(y, limitObj._bottom), limitObj._top ); } if (options.isLimit && isBeyound) { x = e_diffX < 0 ? Math.max(x, diffX) : Math.min(x, 0); y = e_diffY < 0 ? Math.max(y, diffY) : Math.min(y, 0); } $target.css({ left: x + 'px', top: y + '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){ if ($(this).data('data-resize')) { return; } _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; } });
demo：http://jsfiddle.net/aTB2H/
PS: 如有描述错误，请帮忙指正，如果你们有不明白的地方也可以发邮件给我，