dragndrop 是一款可以讓開發者用很簡單的方式來實現 HTML 元素拖曳的套件,透過一些簡單的參數設定就能隨時監聽整個拖曳的過程及結束。
套件名稱:dragndrop
套件版本:1.0.0
作者網站:http://www.cnblogs.com/fromearth/archive/2009/05/14/1456654.html
套件網址:http://plugins.jquery.com/project/dragndrop
發佈日期:2009-05-13
檔案大小:3.17 KB
檔案下載:jquery.dragndrop.js
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | zIndex(選填) 描述: 元素在拖曳時的 z-index 值,主要是避免被其它元素遮住 預設值: 20 opacity(選填) 描述: 元素在拖曳時的透明度 預設值: .7 handler(選填) 描述: 可指定用來拖曳元素用的控制區塊 預設值: null onMove(選填) 描述: 當發生拖曳時觸發的事件;參數 e 為拖曳物件本身,可透過 e.pageX 及 e.pageY 來取得目前位置,其它更多屬性可透過 e.dragndrop 來取得 預設值: function() { } onDrop(選填) 描述: 當發生拖曳結束時觸發的事件;參數 e 為拖曳物件本身,可透過 e.pageX 及 e.pageY 來取得目前位置,其它更多屬性可透過 e.dragndrop 來取得 預設值: function() { } |
方法說明:
檢視原始碼 JavaScript
1 2 | // 幫指定元素加上拖曳的功能 $(selector).Drags(opts); |
使用範例:
檢視原始碼 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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dragndrop.js"></script> <style type="text/css"> .dragDiv { width:200px; background-color:#eff7ff; border:1px solid #96c2f1; position:absolute; left:100px; top:100px; } .dragDiv h5, .dragDiv2 h5 { background-color:#b2d3f5; padding:5px; width:190px; margin:1px; cursor: move; } .dragDiv div, .dragDiv2 div { padding:5px; margin-bottom:10px; } .dragDiv2 { background-color:#f0fbeb; border:1px solid #9bdf70; width:200px; position:absolute; left:400px; top:400px; } .dragDiv2 h5 { background-color:#c2eca7; } </style> <script type="text/javascript"> $(function(){ // 讓 .dragDiv 能進行拖曳 // 並指定 handler 且加上 onMove 及 onDrop 事件 $('.dragDiv').Drags({ handler: '.handler', onMove: function(e) { $('.content').html('目前位置:(Left:' + e.pageX + ' ,Top:' + e.pageY + ')'); }, onDrop:function(e){ $('.content').html('結束拖曳囉!!'); } }); // 讓 .dragDiv2 能進行拖曳 // 並指定 handler、zIndex 及 opacity $('.dragDiv2').Drags({ handler: '.handler2', zIndex:200, opacity:.9 }); }); </script> <body> <div class="dragDiv"> <h5 class="handler">移動我</h5> <div class="content">男丁格爾's 脫殼玩</div> </div> <div class="dragDiv2"> <h5 class="handler2">我也可以移動</h5> <div class="content2">{ zIndex: 200, opacity: .9 }</div> </div> </body> |