你的位置:首页 > Java教程

[Java教程]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_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;  }});

View Code

 

 

demo:http://jsfiddle.net/aTB2H/

 

PS: 如有描述错误,请帮忙指正,如果你们有不明白的地方也可以发邮件给我,

  如需转载,请附上本文地址及出处:博客园华子yjh,谢谢!