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 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
jquery其實(shí)是有個(gè)進(jìn)度條插件的,叫做jqueryprogressbar.js,可是想練習(xí)一下,就沒(méi)有用,自己寫了點(diǎn)代碼。這個(gè)代碼其實(shí)是參考別人的,因?yàn)樽约旱腏S基礎(chǔ)不是很好。2010-03-03easyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法
下面小編就為大家?guī)?lái)一篇easyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07基于LayUI實(shí)現(xiàn)前端分頁(yè)功能的方法
下面小編就為大家?guī)?lái)一篇基于LayUI實(shí)現(xiàn)前端分頁(yè)功能的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07jQuery+Ajax+PHP+Mysql實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)實(shí)例講解
這是一個(gè)典型的Ajax應(yīng)用,在頁(yè)面上,您只需要點(diǎn)擊“下一頁(yè)”,數(shù)據(jù)區(qū)將自動(dòng)加載對(duì)應(yīng)頁(yè)碼的數(shù)據(jù),重新刷新數(shù)據(jù)區(qū)。類似的效果在很多網(wǎng)站上應(yīng)用,尤其在一些需要展示大量圖片數(shù)據(jù)的網(wǎng)頁(yè)如淘寶商品列表頁(yè),Ajax分頁(yè)效果讓您的網(wǎng)站數(shù)據(jù)加載顯得非常流暢。2015-09-09JQuery單選按鈕Radio和復(fù)選框checkbox的操作代碼
這篇文章主要介紹了JQuery單選按鈕Radio和復(fù)選框checkbox的操作,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證實(shí)例詳解
這篇文章主要介紹了jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法,以完整實(shí)例形式較為詳細(xì)的分析了jQuery前臺(tái)控制ajax交互與后臺(tái)asp.net響應(yīng)處理的詳細(xì)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12Jquery中的offset()和position()深入剖析
jquery 中有兩個(gè)獲取元素位置的方法offset()和position(),這兩個(gè)方法之間有什么異同?使用的時(shí)候應(yīng)該注意哪些問(wèn)題?什么時(shí)候使用offset(),什么時(shí)候又使用position()呢?2009-05-05jQuery實(shí)現(xiàn)模擬搜索引擎的智能提示功能簡(jiǎn)單示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)模擬搜索引擎的智能提示功能,結(jié)合實(shí)例形式分析了jQuery基于事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)的模擬搜索提示相關(guān)操作技巧,需要的朋友可以參考下2019-01-01jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
基于Jquery的圖片無(wú)縫滾動(dòng)插件,需要的朋友可以參考下。2010-12-12