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程序设计有所帮助。