基于jquery的鼠標(biāo)拖動(dòng)效果代碼
更新時(shí)間：2012年05月30日 14:37:41 作者：
因?yàn)槭髽?biāo)沒(méi)有拖動(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)過(guò)程：
按下鼠標(biāo)的時(shí)候，給文檔對(duì)象（當(dāng)然也可以是別的DOM對(duì)象）的移動(dòng)事件綁定一個(gè)處理函數(shù)，同時(shí)也給鼠標(biāo)抬起時(shí)綁定一個(gè)解除的處理函數(shù)。
//按下鼠標(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)
這兩天看了一些東西，發(fā)現(xiàn)不需要設(shè)這個(gè)布爾變量;
實(shí)現(xiàn)過(guò)程：
按下鼠標(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)
您可能感興趣的文章:
相關(guān)文章
jQuery動(dòng)態(tài)生成表格及右鍵菜單功能示例
這篇文章主要介紹了jQuery動(dòng)態(tài)生成表格及右鍵菜單功能,結(jié)合實(shí)例形式分析了jQuery表格的動(dòng)態(tài)操作及鼠標(biāo)事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下2017-01-01
jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證
這篇文章主要介紹了jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證，自定義一個(gè)驗(yàn)證方法，感興趣的小伙伴們可以參考一下2016-01-01
Jquery實(shí)現(xiàn)仿騰訊微博發(fā)表廣播
閑來(lái)無(wú)事做的一個(gè)Jquery實(shí)現(xiàn)仿騰訊微博發(fā)表廣播的特效，功能和樣子實(shí)現(xiàn)了，由于樣式是渣渣，所以小伙伴們想直接用的話(huà)，還得自己美化下2014-11-11
jQuery動(dòng)態(tài)改變多行文本框高度的方法
這篇文章主要介紹了jQuery動(dòng)態(tài)改變多行文本框高度的方法,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
用jquery實(shí)現(xiàn)動(dòng)畫(huà)跳到頂部和底部(這個(gè)比較簡(jiǎn)單)
用jquery實(shí)現(xiàn)動(dòng)畫(huà)的跳到頂部和底部，當(dāng)點(diǎn)擊頂部按鈕的時(shí)候，執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動(dòng)條的距離2014-09-09
jQuery頁(yè)面刷新(局部、全部)問(wèn)題分析
這篇文章主要針對(duì)jQuery頁(yè)面刷新問(wèn)題為大家進(jìn)行詳細(xì)分析，包括局部刷新、全部刷新，感興趣的朋友可以參考一下2016-01-01
lyhucSelect基于Jquery的Select數(shù)據(jù)聯(lián)動(dòng)插件
lyhucSelect基于Jquery的Select數(shù)據(jù)聯(lián)動(dòng)插件，需要的朋友可以參考下。2011-03-03
快速回到頁(yè)首的方法有很多，在本文為大家介紹下使用jquery是如何做到的2013-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
jQuery針對(duì)input的class屬性寫(xiě)了多個(gè)值情況下的選擇方法
這篇文章主要介紹了jQuery針對(duì)input的class屬性寫(xiě)了多個(gè)值情況下的選擇方法,結(jié)合實(shí)例形式對(duì)比分析了jQuery選擇器針對(duì)class屬性中有多個(gè)值情況下的選中方法,需要的朋友可以參考下2016-06-06