jQuery实现拖拽效果插件的方法
更新时间:2015年03月23日 11:50:40 作者:work24
这篇文章主要介绍了jQuery实现拖拽效果插件的方法,较为详细的分析了jQuery拖拽效果的实现技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
下面小编就为大家带来一篇easyui datagrid 表格中操作栏 按钮图标不显示的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-07-07jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
这是一个典型的Ajax应用,在页面上,您只需要点击“下一页”,数据区将自动加载对应页码的数据,重新刷新数据区。类似的效果在很多网站上应用,尤其在一些需要展示大量图片数据的网页如淘宝商品列表页,Ajax分页效果让您的网站数据加载显得非常流畅。2015-09-09JQuery单选按钮Radio和复选框checkbox的操作代码
这篇文章主要介绍了JQuery单选按钮Radio和复选框checkbox的操作,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04Jquery中的offset()和position()深入剖析
jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢?2009-05-05jcarousellite.js 基于Jquery的图片无缝滚动插件
基于Jquery的图片无缝滚动插件,需要的朋友可以参考下。2010-12-12
最新评论