是否有遇過當要把某些清單的資料做排序時都要一個一個往上或往下移呢？或者是兩個清單間的資料要能互相插入時的順序問題呢？現在有了 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> </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
