dragsort拖动插件的使用
<!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; }
ul { margin:0px; padding:0px; margin-left:20px; }
#list2 { width:350px; list-style-type:none; margin:0px; }
#list2 li { float:left; padding:5px; width:100px; height:100px; }
#list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }
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>
<div id="list_div" style="width:500px ;height:100px;overflow:auto">
<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>
</div>
<!-- save sort order here which can be retrieved on server on postback -->
<input name="list1SortOrder" type="hidden" />
<script type="text/javascript">
$("#list2").dragsort({
dragSelector: "div",
dragBetween: true,
dragEnd: saveOrder,
placeHolderTemplate: "<li class='placeHolder'><div></div></li>",
scrollContainer:$("#list_div")
});
function saveOrder() {
var data = $("#list2 li").map(function() { return $(this).children().html(); }).get();
$("input[name=list1SortOrder]").val(data.join("|"));
};
</script>
</body>
</html>
最新文章
- RocketMQ原理解析－Broker
- Python的第六天
- POS机刷卡跨行交易的清算方式
- 面向系统管理员的10款Linux GUI工具 (转自51cto)
- shell-自动更改LINUX服务器IP
- 转一个 C#基础类库
- 黑马程序员——JAVA基础之Vector集合
- boost:进程管理
- IOC框架的认识
- android SDK 更新
- android在假设绘制自己定义的bitmap,然后返回给ImageView
- SQL server 2005 PIVOT运算符的使用
- sharepoint 2013 自定义列表eventhandle权限控制
- Web API 路由 [一] Convention-Based Routing
- 项目Beta冲刺Day4
- 电子产品使用感受之----AirPods的一天使用体验分享
- html + css3 demo
- 转：自旋锁（spinlock）
- 【转载】JVM系列三:JVM参数设置、分析
- mysql过滤数据