jQuery列表拖动排列具体实现方法
jquery列表拖动排列具体实现方法。
实现这个很简单
第一，导入js，jquery.dragsort.js，jquery.dragsort-0.4.min.js，jquery-1.4.2.min.js。
第二，代码
. 代码如下:
<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>
三，样式
. 代码如下:
<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>
四，解释
dragselector
css选择器内的元素的列表项的拖动手柄。默认值是“li”。
dragselectorexclude
css选择器的元素内的dragselector不会触发dragsort的。默认值是"input, textarea, a[href]"。
dragend
拖动结束后将被调用的回调函数.
dragbetween
设置为“true”，如果你要启用多组列表之间拖动选定的列表。 默认值是false。
placeholdertemplate
拖动列表的html部分。默认值是"<li></li>".
scrollcontainer
css选择器的元素，作为滚动容器，例如溢出的p设置为自动。 默认值是“窗口“.
scrollspeed
一个数字，它代表了速度，页面拖动某一项时，将滚动容器外，较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".