jQuery制作div板块拖动层排序
2024-10-09 07:10:25
html结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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>
<title>jQuery制作div板块层拖动排序功能</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dragsort-0.5.1.min.js"></script>
<h1>jQuery List DragSortͼ</h1>
<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>
</body>
</html>
下载地址:Demo
最新文章
- easyui tree onloadsuccess事件的心得
- C#的is和as操作符来进行强制类型转换&&值类型的拆箱、装箱
- python(四)函数
- Tomcat从内存、并发、缓存方面优化方法
- [Java] java中的异常处理-续
- ubuntu 换源
- classpath and path.
- MySQL语句相关经验总结
- Extjs4---Cannot read property 'addCls' of null - heirenheiren的专栏 - 博客频道 - CSDN.NET
- Delphi 中Format的字符串格式化使用说明(转)
- rsyslog管理分布式日志
- VR全景智慧城市：开启VR全景逛街新时代~
- JavaScript数组操作总结
- jQuery 效果 – 隐藏和显示
- SpriteBuilder中关节的Breaking force属性
- 初识MySQL数据库的各种CMD命令窗口下的指令
- MySQL中间件之ProxySQL(15)：ProxySQL代理MySQL组复制
- 深入详解美团点评CAT跨语言服务监控（六）消息分析器与报表(一)
- UA池和代理池在scrapy中的应用
- vue--循环列表