DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 版元素拖拽原型代碼
jQuery 版元素拖拽原型代碼
編輯:JQuery特效代碼     
本文主要針對拖拽原型進行解析,給剛接觸 JQuery 的愛好者一個簡單的示例。
在引入 Jquery.js 後:
代碼如下:
<script type="text/javascript">
$(function(){
//綁定拖動元素對象
bindDrag(document.getElementById('test'));
});
function bindDrag(el){
//初始化參數
var els = el.style,
//鼠標的 X 和 Y 軸坐標
x = y = 0;
//邪惡的食指
$(el).mousedown(function(e){
//按下元素後,計算當前鼠標位置
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>

下載:完整示例
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved