您的位置：首页 > Web前端 > JQuery

jquery dragsort table实现拖拽排序

2015-07-31 14:20 651 查看

转自：http://haoningabc.iteye.com/blog/1593640

dragsort官网地址：http://dragsort.codeplex.com/

html代码如下（需引入jquery和dragsort.js）：

<html>
<head>
<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>
</head>
<body>
<table id="list1" border="1">
<thead id="gridThead">
<tr style="cursor: pointer;">
<td class="listHeadCell">编号</td>
<td class="listHeadCell">名称</td>
</tr>
</thead>
<tbody id="gridtbody">
<tr>
<td name="biaozhi">1</td>
<td>名称1</td>
</tr>
<tr>
<td name="biaozhi">2</td>
<td>名称2</td>
</tr>
<tr>
<td name="biaozhi">3</td>
<td>名称3</td>
</tr>
<tr>
<td name="biaozhi">4</td>
<td>名称4</td>
</tr>
</tbody>
</table>
<br/>
<textarea name="listhaoSortOrder" id="listhaoSortOrder" rows=10 cols=100></textarea>
<script type="text/javascript">
$(document).ready(function(){
$("#gridtbody").dragsort({ itemSelector: "tr", dragSelector: "tr", dragBetween: true,dragEnd: saveOrder1, placeHolderTemplate: "<tr></tr>" });
});
function saveOrder1() {
//  var data = $("#gridtbody").map(function() { return $(this).children().html(); }).get();
var data = $("[name='biaozhi']").map(function() { return $(this).html(); }).get();
$("#listhaoSortOrder").val(data.join("|"));
};
</script>
</body>
</html>

代码运行效果截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航