jQuery列表拖动排列具体实现

　　<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>

　　<li><div>16</div></li>

　　<li><div>17</div></li>

　　<li><div>18</div></li>

　　</ul>

　　<ul class="dragsort" 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>

　　<!-- 排序保存在这里可以检索服务器上的回传 -->

　　<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>",

　　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 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>