jQuery实现拖拽效果插件的方法

本文实例讲述了jQuery实现拖拽效果插件的方法。分享给大家供大家参考。具体如下：

下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素，这个插件可以在移动设备上运行

(function($){
  var down = false;
  var prevX = 0;
  var prevY = 0;
  var x = 0;
  var y = 0;
  var px = 0;
  var py = 0;
  var lastPX = -1;
  var lastPY = -1;
  var $target = null;
  var $me = null;
  var $selector = "";
  var settings = {
    mouseButton: 3,
    context: false,
    selectText: false
  };
  $.fn.dragScroll = function(options){
    settings = $.extend(settings, options);
    $selector = $(this).selector;
    $(this).contextmenu(function(){
      return false;
    }).bind("mousedown touchstart", function(e){
      $me = $(this);
      e = event.touches ? event.touches[0] : e;
      $target = $(e.target);
      $target = $target.closest($selector);
      if(settings.viewPort){
 if(!settings.context){
   $me.contextmenu(function(){
     return false;
   });
 }
      }
      if(!settings.selectText){
 $me.attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
      }
      $me = $me.closest($selector);
      if($target && $me.attr("id") != $target.attr("id")){
 return false;
      }
      if(e.which == settings.mouseButton || event.touches){
 $me.css("cursor", "move");
 down = true;
      }
      px = $me.scrollLeft();
      py = $me.scrollTop();
      x = px + e.pageX;
      y = py + e.pageY;
      prevX = x;
      prevY = y;
      return true;
    }).bind("mouseup touchend", function(e){
      $me = $(this);
      e = event.touches ? event.touches[0] : e;
      $me.css("cursor", "auto");
      down = false;
    }).bind("mousemove touchmove", function(e){
      $me = $(this);
      $me = $me.closest($selector);
      e = event.touches ? event.touches[0] : e;
      if((e.which == settings.mouseButton || event.touches) && down){
 if(event.touches){
   event.preventDefault();
 }
 if($target && $me.attr("id") != $target.attr("id")){
   return false;
 }
 $me.css("cursor", "move");
 px = $me.scrollLeft();
 py = $me.scrollTop();
 x = px + e.pageX;
 y = py + e.pageY;
 $me.scrollLeft(px + (-(x - prevX)));
 $me.scrollTop(py + (-(y - prevY)));
 prevX = x - (x - prevX);
 prevY = y - (y - prevY);
 if(lastPX == px)
   prevX = x;
 if(lastPY == py)
   prevY = y;
 lastPX = px;
 lastPY = py;
      }
      return true;
    });
    return this;
  }
})(jQuery);

希望本文所述对大家的jQuery程序设计有所帮助。