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

所属分类: 网络编程 / JavaScript 阅读数: 1546
收藏 0 赞 0 分享

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

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

/**
* jQuery Drag and Scroll
*
* Copyright (c) 2012 Ryan Naddy (ryannaddy.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
(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程序设计有所帮助。

更多精彩内容其他人还在看

JS组件Bootstrap Table使用方法详解

这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript禁止超链接跳转的方法

这篇文章主要介绍了javascript禁止超链接跳转的方法,结合实例分析了JavaScript事件机制与鼠标事件的响应操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现的MD5算法完整实例

这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Hammer.js+轮播原理实现简洁的滑屏功能

这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

基于JQuery实现图片轮播效果(焦点图)

这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果,利用Jquery制作焦点图左右轮播特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript实现瀑布流加载图片原理

这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现的SHA-1加密算法完整实例

这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript实现的SHA-256加密算法完整实例

这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js实现图片层叠轮播切换效果

这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript自动切换焦点控制效果完整实例

这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多