dragsort：很不错的拖动排序zujian

最新推荐文章于 2024-04-24 10:05:42 发布

weixin_33834628

最新推荐文章于 2024-04-24 10:05:42 发布

阅读量244

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/weiweiblog/blog/720794

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、支持拖动排序

2、支持排序后触发事件，将顺序保存。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>DragSort Example</title>
	<meta charset="utf-8" />
	<style type="text/css">
		ul { margin:0px; padding:0px; margin-left:20px; }
		#list1 { width:100%; list-style-type:none; margin:0px; }
		#list1 div { width:10%; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px;float:left;margin-left:10px; }
		.placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
	</style>
</head>
<body>
	<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
	
	
	
	<div id="list1">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
	<input name="list1SortOrder" type="hidden" />

	<script type="text/javascript">
		$("#list1").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "" });
		
		function saveOrder() {
			var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
			$("input[name=list1SortOrder]").val(data.join("|"));
		};
	</script>
</body>
</html>

转载于:https://my.oschina.net/weiweiblog/blog/720794