jQuery 版元素拖拽原型代碼
更新時間：2011年04月25日 01:17:42 作者：
“元素拖拽”顧名思義：拖動，移動，拽放。有很多的解釋，而且在網(wǎng)上相關(guān)資料非常之多，本人在開發(fā) AsyncBox 當(dāng)中也用到此效果，借此分享，同時也是一種技術(shù)積累。
本文主要針對拖拽原型進行解析，給剛接觸 JQuery 的愛好者一個簡單的示例。
在引入 Jquery.js 后：
<script type="text/javascript">
$(function(){
//綁定拖動元素對象
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){
//按下元素后，計算當(dāng)前鼠標(biāo)位置
x = e.clientX - el.offsetLeft;
y = e.clientY - el.offsetTop;
//IE下捕捉焦點
el.setCapture && el.setCapture();
//綁定事件
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
});
//移動事件
function mouseMove(e){
//宇宙超級無敵運算中...
els.top = e.clientY - y + 'px';
els.left = e.clientX - x + 'px';
}
//停止事件
function mouseUp(){
//IE下釋放焦點
el.releaseCapture && el.releaseCapture();
//卸載事件
$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp);
}
}
</script>
下載：完整示例
在引入 Jquery.js 后：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function(){
//綁定拖動元素對象
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){
//按下元素后，計算當(dāng)前鼠標(biāo)位置
x = e.clientX - el.offsetLeft;
y = e.clientY - el.offsetTop;
//IE下捕捉焦點
el.setCapture && el.setCapture();
//綁定事件
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
});
//移動事件
function mouseMove(e){
//宇宙超級無敵運算中...
els.top = e.clientY - y + 'px';
els.left = e.clientX - x + 'px';
}
//停止事件
function mouseUp(){
//IE下釋放焦點
el.releaseCapture && el.releaseCapture();
//卸載事件
$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp);
}
}
</script>
下載：完整示例
您可能感興趣的文章:
- 基于jquery實現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
- Jquery UI實現(xiàn)一次拖拽多個選中的元素操作
- jquery插件jquery.dragscale.js實現(xiàn)拖拽改變元素大小的方法(附demo源碼下載)
- jquery網(wǎng)頁元素拖拽插件效果及實現(xiàn)
- JQuery拖拽元素改變大小尺寸實現(xiàn)代碼
- jQuery如何獲取動態(tài)添加的元素
- jQuery動態(tài)添加、刪除元素的方法
- Jquery顯示、隱藏元素以及添加刪除樣式
- Jquery動態(tài)添加及刪除頁面節(jié)點元素示例代碼
- jquery實現(xiàn)拖拽添加元素功能
相關(guān)文章
凡是運用$,其返回值是一個object $選擇器主要用于選擇標(biāo)簽.基本用法是同css的選擇器.2010-03-03
下面小編就為大家?guī)硪黄猚heckbox批量選中,獲取選中項的值的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jQuery ui插件的使用方法代碼實例，需要的朋友可以參考一下2013-05-05
本篇文章主要介紹了jquery easyui DataGrid簡單示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了jQuery開發(fā)仿QQ版的音樂播放器，文中示例代碼非常詳細，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
點擊一個按鈕時，彈出一個自定義窗口，并且可以隨意的拖拽，jquery也可以實現(xiàn)這樣的功能，下面有個不錯的示例，大家可以感受下2014-03-03
jQuery是用來干什么的 jquery其實就是一個js框架
jQuery是一bai個簡潔而快速的JavaScript庫，可用于du簡化zhi事件處理，HTML文檔遍歷，Ajax交互和dao動畫，以更快速開發(fā)網(wǎng)站2021-02-02
jQuery中操控hidden、disable等無值屬性的方法
在實現(xiàn)一些表單提交頁面時會放置若干隱藏屬性，下面為大家介紹下jQuery中如何操控hidden、disable等無值屬性，感興趣的朋友不要錯過2014-01-01
jquery中cookie用法實例詳解(獲取,存儲,刪除等)
這篇文章主要介紹了jquery中cookie用法,結(jié)合實例詳細分析了jQuery操作cookie的獲取,存儲,刪除等操作,并附帶了Jquery操作Cookie記錄用戶查詢過信息實現(xiàn)方法,需要的朋友可以參考下2016-01-01
jquery網(wǎng)頁回到頂部效果(圖標(biāo)漸隱,自寫)
當(dāng)網(wǎng)頁內(nèi)容草雞多的時候，用戶就需要有個按鈕快速回到頂部，于是用js來實現(xiàn)下，畫布多說，直接上代碼2014-06-06