Home » jQuery 外掛

[jQ]dragndrop 1.0.0

[ 日期： | 瀏覽：8,377 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

dragndrop_1_0_0

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>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響