dargsort.js
工作中今天要实现一个列表排序，框架想了很久没太看明白后来去GitHub找了相关资源，与大家分享一下。【三年前停更了，不过也很香】
-
首先介绍一下dargsort.js；
dragsort 是一个 JavaScript 文件，允许用户在 jQuery 框架上通过拖拽来来做列表排序（如果有些同志们需要兼容各端浏览器还有ie8可以借鉴一下） -
用法相对来说还比较容易上手，介绍几个属性
dragSelector:作为拖放句柄的列表项内元素的CSS选择器，默认元素本身
dragEnd:在拖放结束后调用的回调函数(仅在列表顺序改变时调用)。函数中的关键字“this”将引用被拖动的列表项。
itemSelector:可移动列表项的css选择器。将只匹配列表容器的直接子元素
placeHolderTemplate:被拖动项目的占位符的html
scrollContainer:当列表项被拖出列表时，你想要滚动的元素的css选择器(例如，溢出的div设置为auto)。默认是window。
scrollSpeed:一个数字，表示在将项拖出滚动容器时页面滚动的速度，值越大越快，值越低越慢。设置为0禁用滚动。默认值是5。
dragSelectorExclude: css选择器内的元素不触发dragsort
dragBetween:如果您想启用在选定列表之间拖放的能力，或者允许将列表项拖放到列表之外进行自动滚动，请设置为“true”。默认值为false。
3. 接下来就是的示例
<!DOCTYPE html>
<html>
<head>
<title>DragSort Example</title>
<meta charset="utf-8" />
<style type="text/css">
body {
font-family: Arial;
font-size: 12pt;
padding: 20px;
width: 820px;
margin: 20px auto;
border: solid 1px black;
}
h1 {
font-size: 16pt;
}
h2 {
font-size: 13pt;
}
ul {
margin: 0px;
padding: 0px;
margin-left: 20px;
}
#list1,
#list2 {
width: 350px;
list-style-type: none;
margin: 0px;
}
#list1 li,
#list2 li {
float: left;
padding: 5px;
width: 100px;
height: 100px;
}
#list1 div,
#list2 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>
</head>
<body>
<script
type="text/javascript"
src="http://code.jquery.com/jquery-1.11.1.min.js"
></script>
<script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
<h1>jQuery List DragSort Example</h1>
<a href="http://dragsort.codeplex.com/">Homepage</a><br />
<br />
<h2>Simple 1D list:</h2>
<ul>
<li>bread</li>
<li>vegetables</li>
<li>meat</li>
<li>milk</li>
<li>butter</li>
<li>ice cream</li>
</ul>
<br />
<script type="text/javascript">
$("ul:first").dragsort();
</script>
<h2>2D list with drag and drop between lists:</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>
<!-- save sort order here which can be retrieved on server on postback -->
<input name="list1SortOrder" type="hidden" />
<script type="text/javascript">
$("#list1, #list2").dragsort({
dragSelector: "div",
dragBetween: true,
dragEnd: saveOrder,
placeHolderTemplate: "<li class='placeHolder'><div></div></li>",
});
function saveOrder() {
var data = $("#list1 li")
.map(function () {
return $(this).children().html();
})
.get();
$("input[name=list1SortOrder]").val(data.join("|"));
}
</script>
<div style="clear: both;"></div>
<h2>Usage</h2>
<p>
$("ul").dragsort({ dragSelector: "li", dragEnd: function() { },
dragBetween: false, placeHolderTemplate: "<li></li>" });
</p>
<p>$("ul").dragsort("destroy");</p>
<br />
</body>
</html>
注意： 每次在回调结束需要销毁这个拖动 <p>$("ul").dragsort("destroy");</p>
我用的是table,直接写的
<table id="list3">
<!-- <tbody id="list3">后期看代码在注销代码的时候需要挂载一个实元素，所以必须加上这个。----->
<tr ng-repeat="item in dataList">
<!-- 结果在二次拖动的时候总是执行两次，拖动页面混乱 -->
<td>{
{item.title}}</td>
</tr>
<!--</tbody>----->
</table>
- github地址
https://github.com/tomatobybike/jquery.dragsort.js