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


Posted in Javascript onMarch 23, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
javascript 特殊字符串
Feb 25 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
express express-session的使用小结
Dec 12 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
jQuery操作表单常用控件方法小结
Mar 23 #Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 #Javascript
JavaScript中匿名函数用法实例
Mar 23 #Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 #Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 #Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 #Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 #Javascript
You might like
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
化工专业应届生求职信
2013/11/08 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
机关搬迁方案
2014/05/18 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS