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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 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
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
2019/10/22 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
浅谈python可视化包Bokeh
2018/02/07 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
如何给Python代码进行加密
2020/01/10 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python实现简单猜单词游戏
2020/12/24 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
法制宣传实施方案
2014/03/13 职场文书
临床医学专业求职信
2014/08/08 职场文书
个人总结与自我评价
2014/09/18 职场文书
教师聘用意向书
2015/05/11 职场文书
拉贝日记观后感
2015/06/05 职场文书
干部理论学习心得体会
2016/01/21 职场文书
《花钟》教学反思
2016/02/17 职场文书