欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-20 16:24:33
代码如下:

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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 p{width:90px;height:50px;border:solid 1px black;background-color:#e0e0e0;text-align:center;padding-top:40px;}
.placeholder p{background-color:white!important;border:dashed 1px gray!important;}
</style>
</head>
<body>

<p 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><p>10</p></li>
<li><p>11</p></li>
<li><p>12</p></li>
<li><p>13</p></li>
<li><p>14</p></li>
<li><p>15</p></li>
<li><p>16</p></li>
<li><p>17</p></li>
<li><p>18</p></li>
</ul>

<ul class="dragsort" id="list1">
<li><p>1</p></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
<li><p>8</p></li>
<li><p>9</p></li>
</ul>

<!-- 排序保存在这里可以检索服务器上的回传 -->
<input name="list1sortorder" type="hidden" />

<script type="text/javascript">
$("#list1, #list2").dragsort({
dragselector: "p",
dragbetween: true,
dragend: saveorder,
placeholdertemplate: "<li class='placeholder'><p></p></li>",
scrollspeed: 5
});

function saveorder() {
var data = $("#list1 li").map(function(){
return
$(this).children().html();
}).get();
$("input[name=list1sortorder]").val(data.join("|"));
};
</script>

<p style="clear:both;"></p>

<h2>usage</h2>
$("ul").dragsort({ dragselector: "li", dragend: function() { }, dragbetween: false, placeholdertemplate: "<li></li>" });<br/>
<br/>
<dl class="dragfunction">
<dt>dragselector</dt>
<dd>css选择器内的元素的列表项的拖动手柄。默认值是“li”。</dd>
<dt>dragselectorexclude</dt>
<dd>css选择器的元素内的dragselector不会触发dragsort的。默认值是"input, textarea, a[href]"。</dd>
<dt>dragend</dt>
<dd>拖动结束后将被调用的回调函数.</dd>
<dt>dragbetween</dt>
<dd>设置为“true”,如果你要启用多组列表之间拖动选定的列表。 默认值是false。</dd>
<dt>placeholdertemplate</dt>
<dd>拖动列表的html部分。默认值是"<li></li>".</dd>
<dt>scrollcontainer</dt>
<dd>css选择器的元素,作为滚动容器,例如溢出的p设置为自动。 默认值是“窗口“.</dd>
<dt>scrollspeed</dt>
<dd>一个数字,它代表了速度,页面拖动某一项时,将滚动容器外,较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".</dd>
</dl>


</p>
</body>
</html>


代码2预览:

. 代码如下:


<!doctype html>
<html>
<head>
<title>jquery ui sortable()实现拖动排序</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="https://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
&llt;/head>
<body>
<script>
$(function() {
$( ".sortable" ).sortable({
cursor: "move",
items :"li", //只是li可以拖动
opacity: 0.6, //拖动时,透明度为0.6
revert: true, //释放时,增加动画
update : function(event, ui){ //更新排序之后
alert($(this).sortable("toarray"));
}
});
});
</script>
<ul class="sortable">
<li class="ui-state-default" id="1">第1项</li>
<li class="ui-state-default" id="2" >第2项</li>
<li class="ui-state-default" id="3">第3项</li>
</ul>
</body>
</html>