script.aculo.us - 元素排序

很多時候，您需要為使用者提供透過拖動來重新排序元素（例如列表中的專案）的功能。

如果沒有拖放功能，重新排序將是一場噩夢，但是script.aculo.us透過Sortable類開箱即用地提供了擴充套件的重新排序支援。要成為Sortable的元素將傳遞給Sortable名稱空間中的create()方法。

Sortable由容器元素中的專案元素組成。當您建立新的Sortable時，它會負責建立相應的Draggables和Droppables。

要使用script.aculo.us的Sortable功能，您需要載入dragdrop模組，該模組還需要effects模組。因此，您script.aculo.us的最小載入如下所示：

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Sortable語法

這是建立可排序專案的create()方法的語法。create()方法接受容器元素的id，並根據傳遞的選項對其進行排序。

Sortable.create('id_of_container',[options]);

使用Sortable.destroy完全刪除由Sortable.create建立的Sortable的所有事件處理程式和引用。

注意 - 如果引用的元素已經是Sortable，則呼叫Sortable.create會隱式呼叫Sortable.destroy。以下是呼叫destroy函式的簡單語法。

Sortable.destroy( element );

Sortable選項

建立Sortable物件時，您可以使用以下一個或多個選項。

序號 選項及說明
1

tag

指定可排序容器內可透過拖放排序的元素的型別。預設為'li'。
2

only

指定一個CSS類名或類名陣列，可拖動專案必須擁有該類名才能被放置目標接受。這類似於Draggable的accept選項。預設情況下，不應用任何類名約束。
3

overlap

false、horizontal或vertical之一。控制觸發重新排序的點。預設為vertical。
4

constraint

false、horizontal或vertical之一。約束拖動可排序元素的移動。預設為vertical。
5

containment

啟用在Sortables之間拖放。接受元素或元素ID陣列。重要說明：為了確保兩個容器之間可以進行雙向拖動，請在容器元素之後放置所有Sortable.create呼叫。
6

handle

與同名的Draggable選項相同，指定用於啟動拖動操作的元素。預設情況下，每個元素都是它自己的控制代碼。
7

hoverclass

指定一個CSS類名，當拖動元素經過時將其應用於未拖動的可排序元素。預設情況下，不應用任何CSS類名。
8

ghosting

類似於同名的Draggable選項，如果為true，此選項會導致拖動操作的原始元素保持原位，而元素的半透明副本將隨滑鼠指標一起移動。預設為false。此選項不適用於IE。
9

dropOnEmpty

如果為true，則允許將可排序元素放到空列表中。預設為false。
10

scroll

如果由於設定CSS overflow屬性而可排序容器擁有捲軸，則此選項啟用超出可見元素的列表自動滾動。預設為false。
12

scrollSensitivity

啟用滾動時，它會調整觸發滾動的點。預設為20。
13

scrollSpeed

啟用滾動時，它會調整滾動速度。預設為15。
14

tree

如果為true，則啟用對可排序元素內的子元素進行排序。預設為false。
15

treeTag

如果啟用tree選項，則指定子元素的容器元素型別，其子元素參與可排序行為。預設為'ul'。

您可以在options引數中提供以下回調函式

序號 選項及說明
1

onChange

拖動過程中排序順序發生變化時將呼叫的函式。從一個Sortable拖動到另一個Sortable時，回撥函式將在每個Sortable上呼叫一次。獲取受影響的元素作為其引數。
2

onUpdate

在導致元素順序發生變化的拖動操作終止時將呼叫的函式。

排序示例

此演示已驗證可在IE 6.0中執行。它也適用於最新版本的Firefox。

線上演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>
   
   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

使用我們的線上編譯器，結合上表中討論的不同選項，更好地理解程式碼。

這將產生以下結果：

請注意tag:'li'的使用。同樣，您可以對`

`中提供的以下影像列表進行排序：

線上演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

這將產生以下結果：

序列化可排序元素

Sortable物件還提供一個函式Sortable.serialize()，用於以適合HTTP GET或POST請求的格式序列化Sortable。這可以用於透過Ajax呼叫提交Sortable的順序。

語法

Sortable.serialize(element, options);

選項

建立Sortable物件時，您可以使用以下一個或多個選項。

序號 選項及說明
1

tag

設定將被序列化的標籤型別。這將類似於Sortable.create中使用的型別。
2

name

設定將用於建立鍵/值對以進行HTTP GET/POST格式序列化的鍵的名稱。因此，如果name為xyz，則查詢字串將如下所示：

xyz[]=value1 & xyz[]=value2 & xyz[]=value3

其中值來自子元素，其順序與它們在容器中出現的順序相同。

序列化示例

在此示例中，序列化的輸出將僅提供列表項ID中下劃線後的數字。

要嘗試，請將列表保持其原始順序，按按鈕檢視列表的序列化。現在，重新排序一些元素，然後再次單擊按鈕。

線上演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' + 
            $(container).id + 
            ' is: <br/><pre>' + 
               Sortable.serialize( container,{ name:name} ) + 
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>	
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>
			
      <button type = "button" value = "Click Me" 
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

這將產生以下結果：

在Sortables之間移動專案

以下示例顯示如何將專案從一個列表移動到另一個列表。

線上演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>		
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

請注意，每個容器的containment選項都將兩個容器列為包含元素。透過這樣做，我們使子元素能夠在其父級上下文中進行排序；它還使它們能夠在兩個容器之間移動。

我們將兩個列表的dropOnEmpty設定為true。要檢視此選項對該列表的影響，請將所有元素從一個列表移動到另一個列表，以便一個列表為空。您會發現它允許將元素放到空列表中。

這將產生以下結果：

繫結到Ajax

當然，onUpdate是觸發對伺服器的Ajax通知的主要候選者，例如，當用戶重新排序待辦事項列表或其他一些資料集時。結合Ajax.Request和Sortable.serialize使即時持久化足夠簡單：

線上演示 
<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request 
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serialize建立類似這樣的字串：List[] = 1 & List[] = 2 & List[] = 3 &List[] = 4，其中數字是列表元素ID在下劃線之後的部分識別符號。

現在我們需要編寫file.php程式碼，它將解析作為parse_str($_POST['data']);釋出的資料，您可以對這個排序後的資料執行任何操作。

要了解有關AJAX的更多資訊，請閱讀我們簡單的Ajax教程。

列印頁面
上一頁
下一頁
廣告