基于jquery的一行代碼輕松實(shí)現(xiàn)拖動效果
更新時間：2010年12月28日 23:28:35 作者：
寫JS實(shí)現(xiàn)拖動需要一大堆不便維護(hù)的代碼，實(shí)屬麻煩，Google了大半天，發(fā)現(xiàn)了一個優(yōu)秀的Jquery插件EasyDrag，只需要一行代碼便可輕松在主流瀏覽器上。
實(shí)現(xiàn)拖動效果.
$(document).ready( function()
{
$("#divPanel").easydrag();
}
);
Html 代碼
<div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px" >
<div id="divTitle" style="width:100%;height:25px;background:lavender">
Title
</div>
<div style="width:100%">
</div>
</div>
EasyDrag還可以指定可拖動的區(qū)域，比如只能通過標(biāo)題拖動整個div，我們JS可以這樣寫
$(document).ready ( function()
{
$("#divPanel").easydrag();
$("#divPanel").setHandler("divTitle");
}
);
一個setHandler搞定,不錯開源是個好東西，Jquery更是好東西，插件擴(kuò)展機(jī)制不是一般的好。
Drag.rar打包
復(fù)制代碼 代碼如下:
$(document).ready( function()
{
$("#divPanel").easydrag();
}
);
Html 代碼
復(fù)制代碼 代碼如下:
<div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px" >
<div id="divTitle" style="width:100%;height:25px;background:lavender">
Title
</div>
<div style="width:100%">
</div>
</div>
EasyDrag還可以指定可拖動的區(qū)域，比如只能通過標(biāo)題拖動整個div，我們JS可以這樣寫
復(fù)制代碼 代碼如下:
$(document).ready ( function()
{
$("#divPanel").easydrag();
$("#divPanel").setHandler("divTitle");
}
);
一個setHandler搞定,不錯開源是個好東西，Jquery更是好東西，插件擴(kuò)展機(jī)制不是一般的好。
Drag.rar打包
您可能感興趣的文章:
- 基于jquery完美拖拽，可返回拖動軌跡
- jquery實(shí)現(xiàn)簡單的拖拽效果實(shí)例兼容所有主流瀏覽器(優(yōu)化篇)
- jquery實(shí)現(xiàn)簡單的拖拽效果實(shí)例兼容所有主流瀏覽器
- JQuery拖拽元素改變大小尺寸實(shí)現(xiàn)代碼
- jquery簡單的拖動效果實(shí)現(xiàn)原理及示例
- jQuery實(shí)現(xiàn)可拖動的浮動層完整代碼
- Jquery寫一個鼠標(biāo)拖動效果實(shí)現(xiàn)原理與代碼
- jQuery 可以拖動的div實(shí)現(xiàn)代碼 腳本之家修正版
- jquery實(shí)現(xiàn)div拖拽寬度示例代碼
相關(guān)文章
jQuery+ThinkPHP+Ajax實(shí)現(xiàn)即時消息提醒功能實(shí)例代碼
這篇文章主要介紹了jQuery+ThinkPHP+Ajax實(shí)現(xiàn)即時消息提醒功能的實(shí)例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03
寫了好多篇的學(xué)習(xí)筆記。也該動手練練，咱不能總是紙上談兵。最近做了其他的一些練習(xí)，也是有涉及圖片淡入淡出的，使用的是animate。2010-09-09
這篇文章主要介紹了JQuery中屬性過濾選擇器用法,實(shí)例分析了jQuery屬性過濾選擇器的相關(guān)使用技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jQuery中的編程范式,以實(shí)例形式詳解分析了jQuery中的編程范式,并對比分析了與Prototype的異同及對應(yīng)用法,非常具有實(shí)用價值,需要的朋友可以參考下2014-12-12
dreamweaver 安裝Jquery智能提示，需要的朋友可以參考下。2011-04-04
jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法,涉及jquery鏈?zhǔn)讲僮骷绊撁嬖貥邮娇刂频南嚓P(guān)技巧,需要的朋友可以參考下2015-07-07
jqeury-easyui-layout問題：當(dāng)把class=“easyui-layout”寫在一個獨(dú)立的div中時，layout的樣式無法顯示，具體示例如下2014-03-03
jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法,涉及針對鼠標(biāo)事件的相應(yīng)及頁面元素屬性動態(tài)變換的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-11-11
javascript 開發(fā)之網(wǎng)頁兼容各種瀏覽器
這篇文章主要介紹了javascript 開發(fā)之網(wǎng)頁兼容各種瀏覽器的相關(guān)資料,這里提供了幾種方法幫助大家掌握這樣的功能，需要的朋友可以參考下2017-09-09
jQuery實(shí)現(xiàn)下拉菜單的實(shí)例代碼
本文通過實(shí)例代碼給大家講解了jQuery實(shí)現(xiàn)下拉菜單效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06