jQuery List DragSort 简单的拖拉排序
时间:2014-07-08 13:45 来源: 我爱IT技术网 作者:山风
是否有遇过当要把某些清单的资料做排序时都要一个一个往上或往下移呢?或者是两个清单间的资料要能互相插入时的顺序问题呢?现在有了 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
参数说明：
dragSelector(选填)
描述： 实际触发拖移的元素
预设值： "li"
dragSelectorExclude(选填)
描述： 要排除不触发拖拉的元素
预设值： "input, textarea, a[href]"
dragEnd(选填)
描述： 当拖移完成后触发的事件
预设值： function() { }
dragBetween(选填)
描述： 是否允许在多个可拖移的元素中互相移动插入
预设值： false
placeHolderTemplate(选填)
描述： 用来放置拖移时的替代内容
预设值： "<li> </li>"
scrollContainer(选填) 描述： 当拖移时能滚动捲轴的元素 预设值： window scrollSpeed(选填)
描述： 捲轴滚动的速度
预设值： 5
方法说明：
// 帮指定的元素加上可拖移的功能 $(selector).dragsort(options);
源码：
<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>
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-