jQuery UI - 可排序

上一頁
下一頁

jQuery UI 提供了sortable() 方法，可以使用滑鼠重新排列列表或網格中的元素。此方法根據作為第一個引數傳遞的操作字串執行可排序操作。

語法

sortable () 方法可以兩種形式使用：

$ (selector, context).sortable (options) 方法

sortable (options) 方法宣告 HTML 元素包含可互換的元素。options 引數是一個物件，用於指定重新排序期間涉及的元素的行為。

語法

$(selector, context).sortable(options);

下表列出了可與此方法一起使用的不同options：

序號 選項及描述
1 appendTo

此選項指定在移動/拖動期間使用options.helper建立的新元素將插入到的元素。預設值為parent。

選項 - appendTo

此選項指定在移動/拖動期間使用options.helper建立的新元素將插入到的元素。預設值為parent。

這可以是以下型別：

  • 選擇器 - 這表示一個選擇器，指定將輔助元素附加到的元素。

  • jQuery - 這表示一個包含要將輔助元素附加到的元素的 jQuery 物件。

  • 元素 - 要將輔助元素附加到的文件物件模型 (DOM) 中的元素。

  • 字串 - 字串“parent”將導致輔助元素成為可排序專案的同級元素。

語法

$(".selector").sortable(
   { appendTo: document.body }
);
2 axis

此選項指示移動軸（“x”為水平，“y”為垂直）。預設值為false。

選項 - axis

此選項指示移動軸（“x”為水平，“y”為垂直）。預設值為false。

語法

$(".selector").sortable(
   { axis: "x" }
);
3 cancel

此選項用於透過單擊任何選擇器元素來阻止元素的排序。預設值為"input,textarea,button,select,option"。

選項 - cancel

此選項用於透過單擊任何選擇器元素來阻止元素的排序。預設值為"input,textarea,button,select,option"。

語法

$(".selector").sortable(
   { cancel: "a,button" }
);
4 connectWith

此選項是一個選擇器，它標識另一個可排序元素，該元素可以接受來自此可排序元素的專案。這允許將一個列表中的專案移動到其他列表，這是一種常見且有用的使用者互動。如果省略，則沒有其他元素連線。這是一種單向關係。預設值為false。

選項 - connectWith

此選項是一個選擇器，它標識另一個可排序元素，該元素可以接受來自此可排序元素的專案。這允許將一個列表中的專案移動到其他列表，這是一種常見且有用的使用者互動。如果省略，則沒有其他元素連線。這是一種單向關係。預設值為false。

語法

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5 containment

此選項指示發生位移的元素。該元素將由選擇器（僅考慮列表中的第一個專案）、DOM 元素或字串“parent”（父元素）或“window”（HTML 頁面）表示。

選項 - containment

此選項指示發生位移的元素。

這可以是以下型別：

  • 選擇器 - 這表示一個選擇器。該元素將由選擇器表示（僅考慮列表中的第一個專案）

  • 元素 - 用作容器的 DOM 元素。

  • 字串 - 標識用作容器的元素的字串。可能的值為parent（父元素）、document或window（HTML 頁面）。

語法

$(".selector").sortable(
   { containment: "parent" }
);
6 cursor

指定元素移動時的游標 CSS 屬性。它表示滑鼠指標的形狀。預設值為“auto”。

選項 - cursor

指定元素移動時的游標 CSS 屬性。它表示滑鼠指標的形狀。預設值為“auto”。可能的值為：

  • "crosshair"（十字線）
  • "default"（箭頭）
  • "pointer"（手型）
  • "move"（兩個箭頭交叉）
  • "e-resize"（向右擴充套件）
  • "ne-resize"（向右上方擴充套件）
  • "nw-resize"（向左上方擴充套件）
  • "n-resize"（向上擴充套件）
  • "se-resize"（向右下方擴充套件）
  • "sw-resize"（向左下方擴充套件）
  • "s-resize"（向下擴充套件）
  • "auto"（預設）
  • "w-resize"（向左擴充套件）
  • "text"（寫入文字的游標）
  • "wait"（沙漏）
  • "help"（幫助游標）

語法

$(".selector").sortable(
   { cursor: "move" }
);
7 cursorAt

設定拖動輔助元素相對於滑鼠游標的偏移量。座標可以使用一個或兩個鍵的組合以雜湊的形式給出：{ top, left, right, bottom }。預設值為“false”。

選項 - cursorAt

設定拖動輔助元素相對於滑鼠游標的偏移量。座標可以使用一個或兩個鍵的組合以雜湊的形式給出：{ top, left, right, bottom }。預設值為“false”。

語法

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
8 delay

延遲，以毫秒為單位，在此之後，滑鼠的第一次移動將被考慮在內。位移可能在此時間之後開始。預設值為“0”。

選項 - delay

延遲，以毫秒為單位，在此之後，滑鼠的第一次移動將被考慮在內。位移可能在此時間之後開始。預設值為“0”。

語法

$(".selector").sortable(
   { delay: 150 }
);
9 disabled

如果此選項設定為true，則停用可排序功能。預設值為false。

選項 - disabled

如果此選項設定為true，則停用可排序功能。預設值為false。

語法

$(".selector").sortable(
   { disabled: true }
);
10 distance

滑鼠必須移動的畫素數，然後排序才能開始。如果指定，則在滑鼠拖動超過距離後才會開始排序。預設值為“1”。

選項 - distance

滑鼠必須移動的畫素數，然後排序才能開始。如果指定，則在滑鼠拖動超過距離後才會開始排序。預設值為“1”。

語法

$(".selector").sortable(
   { distance: 5 }
);
11 dropOnEmpty

如果此選項設定為false，則來自此可排序元素的專案不能放在空的可連線可排序元素上。預設值為true。

選項 - dropOnEmpty

如果此選項設定為false，則來自此可排序元素的專案不能放在空的可連線可排序元素上。預設值為true。

語法

$(".selector").sortable(
   { dropOnEmpty: false }
);
12 forceHelperSize

如果此選項設定為true，則強制輔助元素具有大小。預設值為false。

選項 - forceHelperSize

如果此選項設定為true，則強制輔助元素具有大小。預設值為false。

語法

$(".selector").sortable(
   { forceHelperSize: true }
);
13 forcePlaceholderSize

此選項設定為true時，會考慮移動專案時佔位符的大小。此選項僅在初始化options.placeholder時才有用。預設值為false。

選項 - forcePlaceholderSize

此選項設定為true時，會考慮移動專案時佔位符的大小。此選項僅在初始化options.placeholder時才有用。預設值為false。

語法

$(".selector").sortable(
   { forcePlaceholderSize: true }
);
14 grid

此選項是一個數組 [x, y]，指示在滑鼠位移期間排序元素水平和垂直移動的畫素數。預設值為false。

選項 - grid

此選項是一個數組 [x, y]，指示在滑鼠位移期間排序元素水平和垂直移動的畫素數。預設值為false。

語法

$(".selector").sortable(
   { grid: [ 20, 10 ] }
);
15 handle

如果指定，則限制排序的開始，除非 mousedown 發生在指定的元素上。預設值為false。

選項 - handle

如果指定，則限制排序的開始，除非 mousedown 發生在指定的元素上。預設值為false。

語法

$(".selector").sortable(
   { handle: ".handle" }
);
16 helper

允許使用輔助元素進行拖動顯示。預設值為original。

選項 - helper

允許使用輔助元素進行拖動顯示。預設值為original。可能的值為：

  • 字串 - 如果設定為“clone”，則元素將被克隆，並且克隆將被拖動。

  • 函式 - 一個將返回要在拖動時使用的 DOMElement 的函式。

語法

$(".selector").sortable(
   { helper: "clone" }
);
17 items

此選項指定 DOM 元素內部要排序的專案。預設值為> *。

選項 - items

此選項指定 DOM 元素內部要排序的專案。預設值為> *

語法

$(".selector").sortable(
   { items: "> li" }
);
18 opacity

此選項用於定義排序時輔助元素的不透明度。預設值為false。

選項 - opacity

此選項用於定義排序時輔助元素的不透明度。預設值為false。

語法

$(".selector").sortable(
   { opacity: 0.5 }
);
19 placeholder

此選項用於應用於其他空白的類名。預設值為false。

選項 - placeholder

語法

$(".selector").sortable(
   { addClasses: false }
);
20 revert

此選項決定可排序專案是否應使用平滑動畫恢復到其新位置。預設值為false。

選項 - revert

此選項決定可排序專案是否應使用平滑動畫恢復到其新位置。預設值為false。

語法

$(".selector").sortable(
   { revert: true }
);
21 scroll

此選項用於啟用滾動。如果設定為true，則頁面在到達邊緣時會滾動。預設值為true。

選項 - scroll

此選項用於啟用滾動。如果設定為true，則頁面在到達邊緣時會滾動。預設值為true。

語法

$(".selector").sortable(
   { scroll: false }
);
22 scrollSensitivity

此選項指示滑鼠必須退出可見區域多少畫素才能導致滾動。預設值為20。此選項僅在 options.scroll 設定為 true 時使用。

選項 - scrollSensitivity

此選項指示滑鼠必須退出可見區域多少畫素才能導致滾動。預設值為20。此選項僅在 options.scroll 設定為 true 時使用。

語法

$(".selector").sortable(
   { scrollSensitivity: 10 }
);
23 scrollSpeed

此選項指示滾動開始後顯示器的滾動速度。預設值為20。

選項 - scrollSpeed

此選項指示滾動開始後顯示器的滾動速度。預設值為20。

語法

$(".selector").sortable(
   { scrollSpeed: 40 }
);
24 tolerance

此選項是一個String，指定用於測試正在移動的專案是否懸停在另一個專案上的模式。預設值為"intersect"。

選項 - tolerance

此選項是一個String，指定用於測試正在移動的專案是否懸停在另一個專案上的模式。預設值為"intersect"。可能的值為：

  • intersect - 專案至少重疊另一個專案 50%。

  • pointer - 滑鼠指標重疊另一個專案。

語法

$(".selector").sortable(
   { tolerance: "pointer" }
);
25 zIndex

此選項表示排序時元素/輔助元素的 z-index。預設值為1000。

選項 - zIndex

此選項表示排序時元素/輔助元素的 Z-index。預設值為1000。

語法

$(".selector").sortable(
   { zIndex: 9999 }
);

以下部分將向您展示一些拖動功能的工作示例。

預設功能

以下示例演示了可排序功能的一個簡單示例，未向sortable()方法傳遞任何引數。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案sortexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

重新排列上面的產品，使用滑鼠拖動專案。

使用選項 Delay 和 Distance

以下示例演示了在 jQuery UI 的 sort 函式中使用三個選項(a) delay和(b) distance。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案sortexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

重新排列上面的產品，使用滑鼠拖動專案。為了防止意外排序（透過延遲（時間）或距離），我們設定了元素需要拖動多少毫秒才能開始排序，使用delay選項。我們還設定了元素需要拖動多少畫素才能開始排序，使用distance選項。

使用 Placeholder

以下示例演示了在 JqueryUI 的 sort 函式中使用三個選項佔位符。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #sortable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案sortexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

嘗試拖動專案以重新排列它們，在拖動專案時，佔位符（我們使用highlight類來設定此空間的樣式）將顯示在可用位置。

Connectwith 和 Droponempty 選項的使用

以下示例演示了在 JqueryUI 的 sort 函式中使用三個選項(a) connectWith 和 (b) dropOnEmpty。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-5, #sortable-6,#sortable-7 { 
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li { 
            margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案sortexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

透過將選擇器傳遞到connectWith選項，將專案從一個 List1 排序到另一個 (List2)，反之亦然。這是透過使用 CSS 類對所有相關列表進行分組，然後將該類傳遞到可排序函式中（即，connectWith: '#sortable-5, #sortable-6'）來完成的。

嘗試將 List 3 下的專案拖動到 List 2 或 List 1。由於我們將dropOnEmpty選項設定為false，因此無法放置這些專案。

$ (selector, context).sortable ("action", [params]) 方法

sortable (action, params)方法可以在可排序元素上執行操作，例如防止位移。action在第一個引數中指定為字串，並且根據給定的操作，可以選擇提供一個或多個params。

基本上，這裡的操作只不過是我們可以以字串形式使用的 jQuery 方法。

語法

$(selector, context).sortable ("action", [params]);

下表列出了此方法的操作 -

序號 操作 & 描述
1 cancel()

此操作取消當前的排序操作。這在 sort receive 和 sort stop 事件的處理程式中非常有用。此方法不接受任何引數。

操作 - cancel()

取消當前的排序操作。這在 sort receive 和 sort stop 事件的處理程式中非常有用。此方法不接受任何引數。

語法

$(".selector").sortable("cancel");
2 destroy()

此操作完全刪除可排序功能。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。

操作 - destroy()

此操作完全刪除可排序功能。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。

語法

$(".selector").sortable("destroy");
3 disable()

此操作停用包裝集中任何可排序元素的可排序性。元素的可排序性不會被刪除，可以透過呼叫此方法的 enable 變體來恢復。此方法不接受任何引數。

操作 - disable()

此操作停用包裝集中任何可排序元素的可排序性。元素的可排序性不會被刪除，可以透過呼叫此方法的 enable 變體來恢復。此方法不接受任何引數。

語法

$(".selector").sortable("disable");
4 enable()

重新啟用包裝集中任何已停用可排序性的可排序元素的可排序性。請注意，此方法不會向任何不可排序的元素新增可排序性。此方法不接受任何引數。

操作 - enable()

重新啟用包裝集中任何已停用可排序性的可排序元素的可排序性。請注意，此方法不會向任何不可排序的元素新增可排序性。此方法不接受任何引數。

語法

$(".selector").sortable("enable");
5 option( optionName )

此操作獲取當前與指定的optionName關聯的值。其中optionName是要獲取的選項的名稱。

操作 - option( optionName )

此操作獲取當前與指定的optionName關聯的值。其中optionName是要獲取的選項的名稱。

語法

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6 option()

獲取一個包含鍵/值對的物件，這些鍵/值對錶示當前的可排序選項雜湊。此方法不接受任何引數。

操作 - option()

獲取一個包含鍵/值對的物件，這些鍵/值對錶示當前的可排序選項雜湊。此方法不接受任何引數。

語法

$(".selector").sortable("option");
7 option( optionName, value )

此操作設定與指定的optionName關聯的可排序選項的值。其中optionName是要設定的選項的名稱，value是要為選項設定的值。

操作 - option( optionName, value )

此操作設定與指定的optionName關聯的可排序選項的值。其中optionName是要設定的選項的名稱，value是要為選項設定的值。

語法

$(".selector").sortable("option", "disabled", true);
8 option( options )

為可排序設定一個或多個選項。其中options是要設定的選項-值對的對映。

操作 - option( options )

為可排序設定一個或多個選項。其中options是要設定的選項-值對的對映。

語法

$( ".selector" ).sortable( "option", { disabled: true } );
9 refresh()

此操作根據需要重新整理專案列表。此方法不接受任何引數。呼叫此方法將導致新增到可排序中的新專案被識別。

操作 - refresh()

此操作根據需要重新整理專案列表。此方法不接受任何引數。呼叫此方法將導致新增到可排序中的新專案被識別。

語法

$(".selector").sortable("refresh");
10 toArray( options )

此方法返回按排序順序排列的可排序元素的id值的陣列。此方法將Options作為引數，以自定義序列化或排序順序。

操作 - toArray( options )

此方法返回按排序順序排列的可排序元素的id值的陣列。此方法將Options作為引數，以自定義序列化或排序順序。

語法

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11 serialize( options )

此方法返回從可排序元素形成的序列化查詢字串（可透過 Ajax 提交）。

操作 - serialize( options )

此方法返回從可排序元素形成的序列化查詢字串（可透過 Ajax 提交）。預設情況下，它透過檢視每個專案的 id（格式為“setname_number”）來工作，它會輸出類似“setname[]=number&setname[]=number”的雜湊。

語法

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
12 refreshPositions()

此方法主要用於內部重新整理可排序的快取資訊。此方法不接受任何引數。

操作 - refreshPositions()

此方法主要用於內部重新整理可排序的快取資訊。此方法不接受任何引數。

語法

$(".selector").sortable("refreshPositions");
13 widget()

此方法返回包含可排序元素的 jQuery 物件。此方法不接受任何引數。

操作 - widget()

此方法返回包含可排序元素的 jQuery 物件。此方法不接受任何引數。

語法

$(".selector").sortable("widget");

示例

現在讓我們看看使用上表中操作的示例。以下示例演示了toArray( options )方法的使用。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-8{ list-style-type: none; margin: 0; 
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案sortexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

嘗試對專案進行排序，專案的順序顯示在底部。在這裡，我們呼叫$(this).sortable('toArray').toString()，它將提供所有專案 id 的字串列表，它可能看起來像1,2,3,4。

可排序元素上的事件管理

除了我們在上一節中看到的 sortable (options) 方法之外，JqueryUI 還提供了事件方法，這些方法會在特定事件觸發時觸發。這些事件方法列在下面 -

序號 事件方法 & 描述
1 activate(event, ui)

當連線的可排序元素上開始排序操作時，此事件將在可排序元素上觸發。

事件 - activate(event, ui)

當連線的可排序元素上開始排序操作時，此事件將在可排序元素上觸發。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
2 beforeStop(event, ui)

當排序操作即將結束時觸發此事件，輔助元素和佔位符元素引用仍然有效。

事件 - beforeStop(event, ui)

當排序操作即將結束時觸發此事件，輔助元素和佔位符元素引用仍然有效。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
3 change(event, ui)

當排序元素在 DOM 中更改位置時觸發此事件。

事件 - change(event, ui)

當排序元素在 DOM 中更改位置時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
4 create(event, ui)

建立可排序元素時觸發此事件。

事件 - create(event, ui)

建立可排序元素時觸發此事件。其中event的型別為Event，ui的型別為Object。ui 物件為空，但為了與其他事件保持一致而包含在內。

語法

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
5 deactivate(event, ui)

當連線的排序停止時觸發此事件，傳播到連線的可排序元素。

事件 - deactivate(event, ui)

當連線的排序停止時觸發此事件，傳播到連線的可排序元素。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
6 out(event, ui)

當排序專案從連線的列表中移出時觸發此事件。

事件 - out(event, ui)

當排序專案從連線的列表中移出時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
7 over(event, ui)

當排序專案移動到連線的列表中時觸發此事件。

事件 - over(event, ui)

當排序專案移動到連線的列表中時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
8 receive(event, ui)

當連線的列表從另一個列表接收到排序專案時觸發此事件。

事件 - receive(event, ui)

當連線的列表從另一個列表接收到排序專案時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
9 remove(event, ui)

當排序專案從連線的列表中移除並拖動到另一個列表中時觸發此事件。

事件 - remove(event, ui)

當排序專案從連線的列表中移除並拖動到另一個列表中時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
10 sort(event, ui)

在排序操作期間，此事件會重複觸發滑鼠移動事件。

事件 - sort(event, ui)

在排序操作期間，此事件會重複觸發滑鼠移動事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
11 start(event, ui)

當排序操作開始時觸發此事件。

事件 - start(event, ui)

當排序操作開始時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
12 stop(event, ui)

當排序操作結束時觸發此事件。

事件 - stop(event, ui)

當排序操作結束時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
13 update(event, ui)

當排序操作停止且專案的 position 已更改時觸發此事件。

事件 - update(event, ui)

當排序操作停止且專案的 position 已更改時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • helper - 表示正在排序的輔助元素的 jQuery 物件。

  • item - 表示當前拖動元素的 jQuery 物件。

  • offset - 輔助元素的當前絕對位置，表示為 { top, left }。

  • position - 輔助元素的當前 CSS 位置，作為 { top, left } 物件。

  • originalPosition - 元素的原始位置，表示為 { top, left }。

  • sender - 如果從一個可排序元素移動到另一個可排序元素，則表示該專案來自的可排序元素。

  • placeholder - 表示用作佔位符的元素的 jQuery 物件。

語法

$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

示例

以下示例演示了在放置功能期間的事件方法用法。此示例演示了receive、start和stop事件的使用。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-10, #sortable-11 { list-style-type: none; 
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
            padding: 0.4em; padding-left: 1.5em; 
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap">
         <div class = "wrap1"> 
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3> 
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案sortexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

嘗試對 List 1 中的專案進行排序，您將在事件的start和stop處看到訊息顯示。現在將 List 2 中的專案放到 List 1 中，在receive事件上再次顯示一條訊息。

列印頁面

上一頁
下一頁
廣告
© . All rights reserved.