可以讓網頁上大部份元素都變成可拖曳的元件

by - 下午3:28

EasyDrag 實際執行畫面 A-Fu
EasyDrag 實際執行畫面
EasyDrag 這一個套件可以讓大部分的 DOM 元素都可以有拖曳的功能,基於 jQuery 框架撰寫套件的體積很精巧,主要就是拖曳和拖曳後可使用回調函式來讓程式做下一個要執行的事情。

使用方法:
首先載入必要的檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//EasyDrag 的主程式碼 <script src="jquery.easydrag.js" type="text/javascript"></script>


然後為一個HTML的元素命名ID或者是CLASS
<div id="box1">內容</div>

最後加上JavaScript的程式碼就完成了
<script type="text/javascript">
$(function(){ //網頁檔案下載完成執行
//把DOM元素變成可拖曳
$("#box1").easydrag();
        //設定元素拖曳完成執行彈出式視窗
$("#box1").ondrop(function(e, element){ alert(element + " Dropped"); });
});
</script>



作者網站:http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/
檔案大小:4 KB
檔案下載:http://fromvega.com/code/easydrag/jquery.easydrag.js
檔案備份:下載


You May Also Like

0 意見