jQuery实现拖拽效果插件的方法
本文实例讲述了jQuery实现拖拽效果插件的方法。分享给大家供大家参考。具体如下:
下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素,这个插件可以在移动设备上运行
/** *jQueryDragandScroll * *Copyright(c)2012RyanNaddy(ryannaddy.com) *DuallicensedundertheMITandGPLlicenses: *http://www.opensource.org/licenses/mit-license.php *http://www.gnu.org/licenses/gpl.html */ (function($){ vardown=false; varprevX=0; varprevY=0; varx=0; vary=0; varpx=0; varpy=0; varlastPX=-1; varlastPY=-1; var$target=null; var$me=null; var$selector=""; varsettings={ mouseButton:3, context:false, selectText:false }; $.fn.dragScroll=function(options){ settings=$.extend(settings,options); $selector=$(this).selector; $(this).contextmenu(function(){ returnfalse; }).bind("mousedowntouchstart",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(){ returnfalse; }); } } 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")){ returnfalse; } 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; returntrue; }).bind("mouseuptouchend",function(e){ $me=$(this); e=event.touches?event.touches[0]:e; $me.css("cursor","auto"); down=false; }).bind("mousemovetouchmove",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")){ returnfalse; } $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; } returntrue; }); returnthis; } })(jQuery);
希望本文所述对大家的jQuery程序设计有所帮助。