jQuery實(shí)現(xiàn)拖拽效果插件的方法
本文實(shí)例講述了jQuery實(shí)現(xiàn)拖拽效果插件的方法。分享給大家供大家參考。具體如下:
下面的jQuery插件允許你通過(guò)鼠標(biāo)右鍵點(diǎn)擊拖動(dòng)overflow的元素,這個(gè)插件可以在移動(dòng)設(shè)備上運(yùn)行
/**
* 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);
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery拖拽排序插件制作拖拽排序效果(附源碼下載)
- jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無(wú)滾動(dòng)條左右拖拽的方法
- jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法
- jQuery拖拽插件gridster使用指南
- jquery網(wǎng)頁(yè)元素拖拽插件效果及實(shí)現(xiàn)
- JQuery之拖拽插件實(shí)現(xiàn)代碼
- jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變?cè)卮笮〉姆椒?附demo源碼下載)
相關(guān)文章
jQuery插件實(shí)現(xiàn)無(wú)縫滾動(dòng)特效
今天給大家分享一款頁(yè)面無(wú)縫滾動(dòng)的jquery插件,支持上下左右,淡入淡出,滾動(dòng)時(shí)間設(shè)置,動(dòng)畫時(shí)間設(shè)置,感興趣的小伙伴們可以參考一下2015-11-11
jQuery Study Notes學(xué)習(xí)筆記 (二)
jquery簡(jiǎn)單選擇器的使用方法。jquery中最基本的東西了。2010-08-08
jQuery 頁(yè)面 Mask實(shí)現(xiàn)代碼
何為頁(yè)面 Mask (遮罩)?看過(guò) jQuery 的 Lightbox 插件的一定不會(huì)陌生。就是在頁(yè)面上建一個(gè)透明層遮蓋住頁(yè)面的全部?jī)?nèi)部。2010-01-01
jQuery技巧大放送 學(xué)習(xí)jquery的朋友可以看下
jQuery技巧大放送 學(xué)習(xí)jquery的朋友可以看下,非常不錯(cuò)的整理,推薦。2009-10-10
jQuery Mobile操作HTML5的常用函數(shù)總結(jié)
jQuery Mobile是針對(duì)移動(dòng)端開發(fā)的JavaScript框架,正如其名基于jQuery庫(kù),jQuery Mobile主要被用來(lái)操作HTML5設(shè)計(jì)頁(yè)面UI,下面就來(lái)看一下jQuery Mobile操作HTML5的常用函數(shù)總結(jié):2016-05-05
開發(fā)插件的兩個(gè)方法jquery.fn.extend與jquery.extend
jQuery為開發(fā)插件提拱了兩個(gè)方法,分別是jquery.fn.extend與jquery.extend,接下來(lái)就為大家介紹下兩者的具體使用2013-11-11
JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼
這篇文章主要介紹了JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼的相關(guān)資料,這里附有實(shí)現(xiàn)實(shí)例代碼,具有一定的參考價(jià)值,需要的朋友可以參考下2016-12-12

