DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jquery的一行代碼輕松實現拖動效果
基於jquery的一行代碼輕松實現拖動效果
編輯:JQuery特效代碼     
實現拖動效果.
代碼如下:
$(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還可以指定可拖動的區域,比如只能通過標題拖動整個div,我們JS可以這樣寫
代碼如下:
$(document).ready ( function()
{
$("#divPanel").easydrag();

$("#divPanel").setHandler("divTitle");
}
);

一個setHandler搞定,不錯開源是個好東西,Jquery更是好東西,插件擴展機制不是一般的好。
Drag.rar打包
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved