欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery 版元素拖拽原型代碼

 更新時(shí)間：2011年04月25日 01:17:42   作者：  
“元素拖拽”顧名思義：拖動(dòng)，移動(dòng)，拽放。有很多的解釋?zhuān)以诰W(wǎng)上相關(guān)資料非常之多，本人在開(kāi)發(fā) AsyncBox 當(dāng)中也用到此效果，借此分享，同時(shí)也是一種技術(shù)積累。
本文主要針對(duì)拖拽原型進(jìn)行解析，給剛接觸 JQuery 的愛(ài)好者一個(gè)簡(jiǎn)單的示例。
在引入 Jquery.js 后：
復(fù)制代碼 代碼如下:

<script type="text/javascript">
$(function(){
//綁定拖動(dòng)元素對(duì)象
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){
//宇宙超級(jí)無(wú)敵運(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>

下載：完整示例

相關(guān)文章

最新評(píng)論