首頁 > 開發者 > JavaScript

jquery列表拖動排列(由項目提取相當好用)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

代碼一預覽:
複製代碼 代碼如下:
<!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>
<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>

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

<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選取器的元素，作為滾動容器，例如溢出的div設定為自動。 預設值是“視窗“.</dd>
<dt>scrollSpeed</dt>
<dd>一個數字，它代表了速度，頁面拖動某一項時，將滾動容器外，較高使用價值的是速度和較低的值是較慢的。 如果設定為"0"以禁用滾動。預設值是"5".</dd>
</dl>


</div>
</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="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</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>

源碼下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More