Home » jQuery 外掛

[jQ]jQuery List DragSort 0.4.3

[ 日期： | 瀏覽：10,219 | 迴響：28 ]
範例 1
請協助我把這個效果加到我的網站 (只要 1,200 元)
沒錯!只要 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 行會導致程式發生錯誤，所以筆者就暫時先註解掉該行。

也許您對這些文章也有興趣

  • [jQ]EasyDrag 1.5
  • [jQ]dragndrop 1.0.0
  • [jQ]jqDnR 2007.08.19 +r2
  • [jQ]ppDrag 0.2
  • [jQ]jQuery Glow
  • [jQ]Stupid jQuery table plugin

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

1 2

  1. 請問
    使用這項功能時
    能不能紀錄每個裡的訊息呢?
    例如
    #list1的 123 被拖曳到 #list2裡
    有辦法將 #list2 裡有 1~3 10~18 的訊息顯示出來嗎?

    想用這種方式做購物車
    但不知怎麼紀錄使用者買了哪些東西 ~"~

    回覆 ↓

    • 你只要把#list裡面的子元素li都找出來就可以了.
      例如：

      檢視原始碼 JavaScript
      1
2
3
4

      $("#list1 li").each(function(){
	//do something...
	alert($(this).text());
});
      回覆 ↓

  2. 不好意思想請問一下
    我在作drag sort的時候,
    我選了我要drag的物件,他整個相對的位置跑到右下一些,
    是因為js source裡面在作位置運算的關係嗎?

    回覆 ↓

    • 應該是它本身對於 event 的座標記算的關係..
      若可以的話, 提供一個有問題的範例來讓大家幫你找找問題在那

      回覆 ↓

  3. 發現原來可以改成live(即改讀取ajax的資料)也可以Sort

    改動原始碼的init

    $(this.container).attr("listIdx", i).find(opts.dragSelector).css("cursor", "pointer").live('mousedown', this.grabItem);

    回覆 ↓

    • 把資料傳送到 Server 端存檔是需要自己去寫出來的..
      該外掛最多是提供你資料的排序而已...

      你可以在 onDrop 時透過 tableDnDSerialize() 來取得排序的內容

      回覆 ↓

  6. 請問一下..我把LI 內放圖檔
    想讓使用者把圖檔做排序後我再存起來.
    但是您提供的alert($(this).text()); 方法,只能抓文字
    並無法抓到裡面的圖檔名 可否提供一個方法讓我去抓使用者怎麼排的

    回覆 ↓

  7. 感謝您的回覆,我按照你的範例,改成這樣左邊要留著,右邊是要刪掉的
    再按照左排序改成使用者要的順序,右邊的圖刪掉的方式
    有什麼方法嗎?

    回覆 ↓

  8. 貼了LI 上不了..HTML 貼不上去用| 代表
    LI | DIV | img src="img/1.jpg" width=100 |/DIV | /LI

    回覆 ↓

  9. 版主您好，
    我想請問一下，若我想把ul元素改為用listbox，
    也就是做2個listbox(lbx1，lbx2)，把lbx1的選項拉至lbx2中，
    這方法是否可用dragsort實現呢?如果可以的話，該如何修改呢?

    回覆 ↓

    • dragsort 外掛看來是不支援 listbox..
      不過你可以自己用 ul li 來做出兩個不同的群組來達到你要的效果

      回覆 ↓
1 2

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>