快捷導(dǎo)航

基于jquery的鼠標(biāo)拖動(dòng)效果代碼

更新時(shí)間：2012年05月30日 14:37:41 作者：

因?yàn)槭髽?biāo)沒有拖動(dòng)事件(按下鼠標(biāo)并移動(dòng))，只有按下，抬起，移動(dòng)

記得在之前的一個(gè)"拖動(dòng)層"的隨筆中，我實(shí)現(xiàn)拖動(dòng)，是用的一個(gè)布爾變量,判斷是否可以拖動(dòng)某元素。
這兩天看了一些東西，發(fā)現(xiàn)不需要設(shè)這個(gè)布爾變量;

實(shí)現(xiàn)過程：
按下鼠標(biāo)的時(shí)候，給文檔對(duì)象（當(dāng)然也可以是別的DOM對(duì)象）的移動(dòng)事件綁定一個(gè)處理函數(shù)，同時(shí)也給鼠標(biāo)抬起時(shí)綁定一個(gè)解除的處理函數(shù)。

復(fù)制代碼代碼如下:

 
//按下鼠標(biāo)并移動(dòng)時(shí)(拖動(dòng))，調(diào)用的函數(shù)； 
function startSelection(event){ 
…… 
} 

//解除移動(dòng)時(shí)的處理函數(shù)； 
function cancelSelection() { 
$(document).unbind('mousemove', startSelection).unbind('mouseup', cancelSelection); 
　　} 
//鼠標(biāo)在按下時(shí)調(diào)用的函數(shù) 
function imgMouseDown(event){ 
$(document).mousemove(startSelection).mouseup(cancelSelection); 
} 
$img.bind("mousedown",imgMouseDown) 

您可能感興趣的文章:

鼠標(biāo)拖動(dòng)

相關(guān)文章

jquery插件jSignature實(shí)現(xiàn)手動(dòng)簽名
在IE7~IE8這種不支持HTML5的瀏覽器上，是利用Flash嵌入的方式實(shí)現(xiàn)的簽名處理，在支持的HTML5的瀏覽器上默認(rèn)采用canvas標(biāo)簽處理簽名，可以生成 PNG格式、SVG格式的簽名圖片。非常適合在IPAD等移動(dòng)客戶端上實(shí)現(xiàn)手寫簽名的，該插件基于JQuery
2015-05-05
基于hover的用法實(shí)例(推薦)
下面小編就為大家?guī)硪黄趆over的用法實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
關(guān)于hashchangebroker和statehashable的補(bǔ)充文檔
我覺得之前寫的兩篇隨筆有點(diǎn)不負(fù)責(zé)任，完全沒寫明白，補(bǔ)充了一份文檔（權(quán)且算是文檔吧=.=）
2011-08-08
jQuery實(shí)現(xiàn)360°全景拖動(dòng)展示
360全景就是視角超過人的正常視角的圖像，而我們這里說的全景特指水平視角360度，垂直視角180度的圖像。可以全景空間里進(jìn)行切換，達(dá)到瀏覽各個(gè)不同場(chǎng)景360全景展示的目的。
2015-03-03
jQuery選擇器源碼解讀（四）：tokenize方法的Expr.preFilter
這篇文章主要介紹了jQuery選擇器源碼解讀（四）：tokenize方法的Expr.preFilter,本文用詳細(xì)的注釋解讀了tokenize方法的Expr.preFilter的實(shí)現(xiàn)源碼,需要的朋友可以參考下
2015-03-03
Json實(shí)現(xiàn)異步請(qǐng)求提交評(píng)論無需跳轉(zhuǎn)其他頁面
Json實(shí)現(xiàn)異步請(qǐng)求，效果即為，在輸入框中輸入相關(guān)文字，點(diǎn)擊提交，下方會(huì)自動(dòng)將書寫的文字進(jìn)行展示，無需跳轉(zhuǎn)其他頁面
2014-10-10
jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動(dòng)畫效果,涉及jQuery事件響應(yīng)及動(dòng)態(tài)修改頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02
jQuery學(xué)習(xí)筆記之jQuery動(dòng)畫效果
本次學(xué)習(xí)分為兩個(gè)文件的測(cè)試，第一個(gè)是基本動(dòng)畫，第二個(gè)是滑動(dòng)和透明動(dòng)畫效果，分別如下
2013-09-09
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶分組數(shù)據(jù)的Table表頭排序方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery針對(duì)表頭的操作及元素遍歷排序相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11