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 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
微信开发 微信授权详解
Oct 21 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
JS typeof fn === 'function' && fn()详解
Aug 22 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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
Zend引擎的发展 [15]
2006/10/09 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
jquery.validate的使用说明介绍
2013/11/12 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
2016/11/28 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
连接Python程序与MySQL的教程
2015/04/29 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Django模板Templates使用方法详解
2019/07/19 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
Mysql基础知识点汇总
2021/05/26 MySQL
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技