这篇文章主要介绍了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' });     完整程序源码：   代码如下: $.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(){