Home » jQuery 外掛

[jQ]ppDrag 0.2

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

ppDrag 0.2

ppDrag 跟官方的 jQuery UI 的 Draggable 比起來算是精簡版的拖移套件，一樣都是可讓指定的物件產生可拖移的效果。

套件名稱：ppDrag
套件版本：0.2
作者網站：http://ppdrag.ppetrov.com/
套件網址：http://plugins.jquery.com/project/ppdrag
發佈日期：2008-08-25
檔案大小：2.93 KB
檔案下載：jquery.ppdrag.js

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11

zIndex(選填)
描述： 指定元素的深度
預設值： 無
 
stop(選填)
描述： 拖移事件停止後的 callback
預設值： 無
 
parameter(選填參數)
描述： 若選項只輸入"destroy"表示移除拖移功能
預設值： 無

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 幫指定元素加入 ppdrag 效果
$(selector).ppdrag([options]);
 
// 移除 ppdrag 效果
$(selector).ppdrag("destroy");

使用範例：

檢視原始碼 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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ppdrag.js"></script>
<style type="text/css">
	.dragbox {
		width: 200px;
		height: 50px;
		border: 1px solid blue;
		margin: 10px;
		background: yellow;
		text-align: center;
		position: relative;
		cursor: move;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫 #box-ppdrag 加上拖移效果
		// 設定其拖移時的 zIndex 值及拖移停止後的 callback
		$("#box-ppdrag").ppdrag({
			zIndex: 1000,
			stop: function(){
				// this 為拖移物件本身
				alert($(this).html());
				// 移除拖移功能
				$(this).ppdrag("destroy");
			}
		});
	});
</script>
 
<body>
	<div class="dragbox" id="box-ppdrag">試著拖移我!!</div>
</body>

範例 1

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

附註：
目前 ppDrag 不支援物件 Position 的 static 值，僅支援 relative、absolute 及 fixed 等。

9 筆針對 [jQ]ppDrag 0.2 的迴響

  1. 男丁大大:
    請問如果要做成可以拖曳的button要怎麼改呢?
    我試過把上面的方法一樣畫葫蘆弄在button上但是沒有功用

  3. 我是自己弄一個Button然後去套用上面的script是沒辦法!
    我是全部都照男丁大大的東西複製貼上的，請問你改成button
    有改哪些地方?
    請問有button的範例嗎?

  4. 男丁大大：
    我把Button包在div裡面就可以了!!
    現在還有個問題想請教，如果我有多個想要移動那該怎麼打？

    • 是一次移動多個還是多個都能移動?
      如果是要多個都要能移動, 就像你剛把 button 包在 div 中一樣就好了。

發表迴響