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

时间： 2015-03-20