EasyDrag 是一個很小巧的套件,只要一行程式就能讓你的元素能被拖來拖去的!
套件名稱:EasyDrag
套件版本:1.5
作者網站:http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/
套件網址:http://plugins.jquery.com/project/EasyDrag
發佈日期:2008-07-17
檔案大小:4.76 KB
檔案下載:jquery.easydrag.handler.beta2.js
參數說明:
檢視原始碼 JavaScript
1 2 3 | allowBubbling(選填) 描述: 是否產生冒泡事件 預設值: false |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 | // 讓指定的元素有拖曳的功能 $(selector).easydrag(allowBubbling); // 讓指定的 #id 元素被拖曳才有反應;該元素必須為拖曳元素的子元素才行 $(selector).setHandler(handlerId); // 當元素正在被拖曳時所觸發的事件;function(e, element){} $(selector).ondrag(callback); // 當元素被拖曳結束後所觸發的事件;function(e, element){} $(...).ondrop(callback); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.easydrag.handler.beta2.js"></script> <style type="text/css"> #box1, #box2 { background-color: yellow; padding: 5px; border: 2px solid orange; width: 200px; } #handler2 { width: 100%; background-color: red; } </style> <script type="text/javascript"> $(function(){ // 讓 #box1 有拖曳功能 // 當拖曳後顯示對話方塊 $("#box1").easydrag().ondrop(function(e, element){ alert(element.id + "被移動了"); }); // 讓 #box2 有拖曳功能, 並指定 #handler2 才能拖 // 當拖曳時會在子元素 p 中顯示目前座標 $("#box2").easydrag().setHandler('handler2').ondrag(function(e, element){ var _this = $(element); $("p", _this).html("X:" + _this.offset().left + ", Y:" + _this.offset().top); }); }); </script> <body> <div id="box1"> EasyDrag 是一個很小巧的套件,只要一行程式就能讓你的元素能被拖來拖去的! </div> <div id="box2"> <div id="handler2">移動我</div> <p>EasyDrag 是一個很小巧的套件,只要一行程式就能讓你的元素能被拖來拖去的!</p> </div> </body> |
找了好久,终于在这里找到了,哈哈,十分感谢