jQuery 版元素拖拽原型代碼
更新時(shí)間：2011年04月25日 01:17:42 作者：
“元素拖拽”顧名思義：拖動(dòng)，移動(dòng)，拽放。有很多的解釋，而且在網(wǎng)上相關(guān)資料非常之多，本人在開發(fā) AsyncBox 當(dāng)中也用到此效果，借此分享，同時(shí)也是一種技術(shù)積累。
本文主要針對拖拽原型進(jìn)行解析，給剛接觸 JQuery 的愛好者一個(gè)簡單的示例。
在引入 Jquery.js 后：
<script type="text/javascript">
$(function(){
//綁定拖動(dòng)元素對象
bindDrag(document.getElementById('test'));
});
function bindDrag(el){
//初始化參數(shù)
var els = el.style,
//鼠標(biāo)的 X 和 Y 軸坐標(biāo)
x = y = 0;
//邪惡的食指
$(el).mousedown(function(e){
//按下元素后，計(jì)算當(dāng)前鼠標(biāo)位置
x = e.clientX - el.offsetLeft;
y = e.clientY - el.offsetTop;
//IE下捕捉焦點(diǎn)
el.setCapture && el.setCapture();
//綁定事件
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
});
//移動(dòng)事件
function mouseMove(e){
//宇宙超級無敵運(yùn)算中...
els.top = e.clientY - y + 'px';
els.left = e.clientX - x + 'px';
}
//停止事件
function mouseUp(){
//IE下釋放焦點(diǎn)
el.releaseCapture && el.releaseCapture();
//卸載事件
$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp);
}
}
</script>
下載：完整示例
在引入 Jquery.js 后：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function(){
//綁定拖動(dòng)元素對象
bindDrag(document.getElementById('test'));
});
function bindDrag(el){
//初始化參數(shù)
var els = el.style,
//鼠標(biāo)的 X 和 Y 軸坐標(biāo)
x = y = 0;
//邪惡的食指
$(el).mousedown(function(e){
//按下元素后，計(jì)算當(dāng)前鼠標(biāo)位置
x = e.clientX - el.offsetLeft;
y = e.clientY - el.offsetTop;
//IE下捕捉焦點(diǎn)
el.setCapture && el.setCapture();
//綁定事件
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
});
//移動(dòng)事件
function mouseMove(e){
//宇宙超級無敵運(yùn)算中...
els.top = e.clientY - y + 'px';
els.left = e.clientX - x + 'px';
}
//停止事件
function mouseUp(){
//IE下釋放焦點(diǎn)
el.releaseCapture && el.releaseCapture();
//卸載事件
$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp);
}
}
</script>
下載：完整示例
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
- Jquery UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作
- jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變元素大小的方法(附demo源碼下載)
- jquery網(wǎng)頁元素拖拽插件效果及實(shí)現(xiàn)
- JQuery拖拽元素改變大小尺寸實(shí)現(xiàn)代碼
- jQuery如何獲取動(dòng)態(tài)添加的元素
- jQuery動(dòng)態(tài)添加、刪除元素的方法
- Jquery顯示、隱藏元素以及添加刪除樣式
- Jquery動(dòng)態(tài)添加及刪除頁面節(jié)點(diǎn)元素示例代碼
- jquery實(shí)現(xiàn)拖拽添加元素功能
相關(guān)文章
jquery 學(xué)習(xí)之二 屬性 文本與值(text,val)
jquery 學(xué)習(xí)之二 屬性 文本與值(text,val)，學(xué)習(xí)jquery的朋友可以參考下。2010-11-11
不好意思，剛剛發(fā)了一個(gè)類似的效果，發(fā)現(xiàn)代碼比較多，而卻還有一個(gè)bug，現(xiàn)在修正了錯(cuò)誤，需要的朋友可以參考下。2011-07-07
jquery.cookie.js是一個(gè)基于jquery的插件,一個(gè)輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。接下來通過本文給大家介紹Jquery操作cookie記住用戶名，需要的朋友參考下吧2016-03-03
JQuery 選擇和過濾方法代碼總結(jié)，學(xué)習(xí)jquery的朋友可以參考下。2010-11-11
詳解Jquery EasyUI tree 的異步加載（遍歷指定文件夾，根據(jù)文件夾內(nèi)的文件生成tree）
本篇文章主要介紹了Jquery EasyUI tree 的異步加載，可以實(shí)現(xiàn)遍歷指定文件夾，根據(jù)文件夾內(nèi)的文件生成tree，有興趣的可以了解一下。2017-02-02
jquery+css實(shí)現(xiàn)簡單的圖片輪播效果
這篇文章主要介紹了jquery+css實(shí)現(xiàn)簡單的圖片輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例
下面小編就為大家?guī)硪黄猨query操作ID帶有變量的節(jié)點(diǎn)實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
如何實(shí)現(xiàn)星星評價(jià)（jquery.raty.js插件）
本文主要分享了用jQuery插件jquery.raty.js實(shí)現(xiàn)星星評價(jià)功能：后臺(tái)傳數(shù)據(jù)，前臺(tái)顯示星星個(gè)數(shù)的具體方法。有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
jquery text()要注意啦 ，大家可以看看。2009-10-10
這篇文章介紹了jQuery中的事件，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03