Jquery中文網 www.2030036.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery 版元素拖拽原型代碼

jQuery 版元素拖拽原型代碼

發布時間:2013-07-05   編輯:www.2030036.live
“元素拖拽”顧名思義:拖動,移動,拽放。有很多的解釋,而且在網上相關資料非常之多,本人在開發 AsyncBox 當中也用到此效果,借此分享,同時也是一種技術積累。
“元素拖拽”顧名思義:拖動,移動,拽放。有很多的解釋,而且在網上相關資料非常之多,本人在開發 AsyncBox 當中也用到此效果,借此分享,同時也是一種技術積累。 本文主要針對拖拽原型進行解析,給剛接觸 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>

下載:完整示例

您可能感興趣的文章:
jQuery 版元素拖拽原型代碼
JQuery拖拽元素改變大小尺寸實現代碼
jquery實現簡單的拖拽效果實例兼容所有主流瀏覽器(優化篇)
jquery實現簡單的拖拽效果實例兼容所有主流瀏覽器
如何使用jQuery Draggable和Droppable實現拖拽功能
Jquery寫一個鼠標拖動效果實現原理與代碼
jquery實現div拖拽寬度示例代碼
jquery網頁元素拖拽插件效果及實現
簡單的jquery拖拽排序效果實現代碼
jquery簡單的拖動效果實現原理及示例

[關閉]
888棋牌金花app 资产配置私募基金 吉林麻将小鸡儿飞蛋怎么胡 真正好玩的棋牌游戏 长沙麻将免费下载 血战麻将技巧口诀 2020年09期什么时候开奖 股票代码查询网 沈阳盛京棋牌官网 海王捕鱼通用辅助软件 炒股 APP