返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jquery列表拖动排列(由项目提取相当好用)

2020-05-17 06:24:46易采站长站整理

代码一预览:

<!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″ />
<title>最好的jquery列表拖动排列自定义拖动层排列</title>
<meta name=”description” content=”jquery列表模块拖动层，当点击或拖动列表时，可以自定义随意拖放列表模块到相应位置。支持回调函数的拖动层。” />
<script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery.dragsort-0.4.min.js”></script>
<style type=”text/css”>
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial;font-size:12pt;color:#333;}
h1{font-size:16pt;}
h2{font-size:13pt;}
/* demo */
.demo{padding:20px;width:800px;margin:20px auto;border:solid 1px black;}
.demo h2{margin:30px 0 20px 0;color:#3366cc;}
/* dragfunction */
.dragfunction{margin:40px 0 0 0;}
.dragfunction dt{height:30px;font-weight:800;}
.dragfunction dd{line-height:22px;padding:0 0 20px 0;color:#5e5e5e;}
/* dragsort */
.dragsort-ver li{height:30px;line-height:30px;}
.dragsort{width:350px;list-style-type:none;margin:0px;}
.dragsort li{float:left;padding:5px;width:100px;height:100px;}
.dragsort 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>
<div class=”demo”>
<h1>jQuery列表拖动排列演示</h1>
<h2>简单的一组列表:</h2>
<ul class=”dragsort-ver”>
<li>你猜</li>
<li>你不猜</li>
<li>你不猜你不猜</li>
<li><input type=”checkbox” name=”intro_fields[]” value=”猜猜”/>猜猜</li>
<li>你猜不猜</li>
<li>你猜不猜不猜</li>
<li>你不猜不猜</li>
</ul>
<br/>
<script type=”text/javascript”>
$(“ul:first”).dragsort();
</script>
<h2>两组列表拖放:(无限组拖放)</h2>
<ul class=”dragsort” id=”list2″ style=”float:right;”>
<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>

相关文章 大家在看