Home » jQuery 外掛

[jQ]jQuery List DragSort 0.4.3

範例 1
沒錯!只要 1,200 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

jQuery List DragSort 0.3.6

是否有遇過當要把某些清單的資料做排序時都要一個一個往上或往下移呢?或者是兩個清單間的資料要能互相插入時的順序問題呢?現在有了 jQuery List DragSort 套件之後,不管是資料排序或是清單間的資料移動都只要"拖拖拉拉"就可以囉!

套件名稱:jQuery List DragSort
套件版本:0.4.3
作者網站:http://dragsort.codeplex.com/
套件網址:http://plugins.jquery.com/project/listsort
發佈日期:2011-06-25
檔案大小:11.0 KB
檔案下載:jquery.dragsort.js

參數說明:

檢視原始碼 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
dragSelector(選填)
描述: 實際觸發拖移的元素
預設值: "li"
 
dragSelectorExclude(選填)
描述: 要排除不觸發拖拉的元素
預設值: "input, textarea, a[href]"
 
dragEnd(選填)
描述: 當拖移完成後觸發的事件
預設值: function() { }
 
dragBetween(選填)
描述: 是否允許在多個可拖移的元素中互相移動插入
預設值: false
 
placeHolderTemplate(選填)
描述: 用來放置拖移時的替代內容
預設值: "<li>&nbsp;</li>"
 
scrollContainer(選填)
描述: 當拖移時能滾動捲軸的元素
預設值: window
 
scrollSpeed(選填)
描述: 捲軸滾動的速度
預設值: 5

方法說明:

檢視原始碼 JavaScript
1
2
// 幫指定的元素加上可拖移的功能
$(selector).dragsort(options);

使用範例:

檢視原始碼 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dragsort.js"></script>
<style type="text/css">
	.sample {
		padding: 20px;
		width: 800px;
		margin: auto;
		padding-top: 20px;
		margin-top:20px;
	}
	ul {
		margin: 0;
		padding: 0;
		margin-left: 20px;
	}
	#list1, #list2 {
		width: 350px;
		list-style: none;
		margin: 0;
	}
	#list1 li, #list2 li {
		float: left;
		padding: 5px;
		width: 100px;
		height: 100px;
	}
	#list1 li div, #list2 li div {
		width: 90px;
		height: 50px;
		border: solid 1px black;
		background-color: #E0E0E0;
		text-align: center;
		padding-top: 40px;
	}
	#list2 {
		float: right;
	}
	.placeHolder div {
		background-color: white !important;
		border: dashed 1px gray !important;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫第一組 ul 加上拖移排序的功能
		$("ul:first").dragsort();
 
		// 指定 #list1 及 list2 的 div 都能拖移
		// 並能互相移動插入
		$("#list1, #list2").dragsort({
			dragSelector: "div", 
			dragBetween: true,
			placeHolderTemplate: "<li class='placeHolder'><div></div></li>"
		});
	});
</script>
 
<body>
	<div class="sample">
		<h2>簡單的拖移排序</h2>
 
		<ul>
			<li>bread</li>
			<li>vegetables</li>
			<li>meat</li>
			<li>milk</li>
			<li>butter</li>
			<li>ice cream</li>
		</ul>
 
		<br/>
		<h2>兩組 ul 中的 li 元素都能互相拖移插入</h2>
 
		<ul id="list2">
			<li><div>10</div></li>
			<li><div>11</div></li>
			<li><div>12</div></li>
			<li><div>13</div></li>
			<li><div>14</div></li>
			<li><div>15</div></li>
			<li><div>16</div></li>
			<li><div>17</div></li>
			<li><div>18</div></li>
		</ul>
 
		<ul id="list1">
			<li><div>1</div></li>
			<li><div>2</div></li>
			<li><div>3</div></li>
			<li><div>4</div></li>
			<li><div>5</div></li>
			<li><div>6</div></li>
			<li><div>7</div></li>
			<li><div>8</div></li>
			<li><div>9</div></li>
		</ul>
	</div>
</body>
範例 1

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

備註:
0.4.1 版的在 188 行會導致程式發生錯誤,所以筆者就暫時先註解掉該行。

32 筆針對 [jQ]jQuery List DragSort 0.4.3 的迴響

    • 沒看到你的範例, 所以不知道你內容是怎麼寫的, 不過你可是試著設定 dragSelectorExclude 的屬性看看

  1. 男丁格爾 大大

    很謝謝您的分享

    我用了你的範例做了一個圖檔排序..但是因圖下方我需要有一個文字欄位用來輸入圖片說明
    但是由於用LI 包起來了..造成我點文字欄位,變成要移動圖,讓我無法KEY 文字進去
    這有辦法可以解決嗎?

  2. 男丁格爾 大大..

    上一封問題請忽略
    原來新版的有排除..我抓下來用..文字欄位己經可以KEY了...大大感恩

  3. 男丁大大您好!!有個問題困或很久
    我是使用PHP寫的程式~~目前已經可以利用這個程式移動順序了~
    但是要如何儲存移動過的位置呢??
    這個部份真的很困惑!!!可以麻煩男丁大大幫我解或一下~~

發表迴響