一、前言
最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点，用于固定定位，然后在复制HTML，粘贴在页面的开发代码中，就是这么一个功能，实现了很多遍，都没有做好，不得已采用了jQuery.fn.draggable插件，在接触一些资料和别人的思路，今天终于把这个拖动功能给完善了，下面就来看看它的实现
二、设计思路
在拖动元素上绑定鼠标按下事件，在文档对象中绑定鼠标移动，鼠标弹起事件；
为什么不把三个事件都绑定在拖动元素上，这是因为鼠标移动太快时，鼠标移动和弹起事件处理程序将不会执行使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载复制代码代码如下:$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 $target.css({ left: x + 'px' });}if ( y >= limitObj._top && y $target.css({ top: y + 'px' });}进一步思考：为什么会出现上面问题，原因在于变量x可能会小于limitObj._left或大于limitObj._right，变量y同理，因此代码需要像下面这样处理：复制代码代码如下:if (x x = limitObj._left;}if (x > limitObj._right) {x = limitObj._right;}if (y 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('准备拖动').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });},dragMove: function(){var pos = $(this).position();$(this).html('拖动中(' + pos.left + ',' + pos.top + ')' );},dragEnd : function(){$(this).html('拖动结束');}});}());