JqueryUI - Có thể sắp xếp

jQueryUI cung cấp sortable()phương pháp sắp xếp lại các phần tử trong danh sách hoặc lưới bằng cách sử dụng chuột. Phương thức này thực hiện hành động sắp xếp dựa trên một chuỗi hoạt động được truyền làm tham số đầu tiên.

Cú pháp

Các sortable () phương pháp có thể được sử dụng ở hai dạng:

  • $ (bộ chọn, ngữ cảnh) .sortable (tùy chọn) Phương thức

  • $ (selector, ngữ cảnh) .sortable ( "hành động", [params]) Phương pháp

$ (bộ chọn, ngữ cảnh) .sortable (tùy chọn) Phương thức

Phương thức có thể sắp xếp (tùy chọn) khai báo rằng một phần tử HTML chứa các phần tử có thể thay thế cho nhau. Các tùy chọn tham số là một đối tượng mà xác định hành vi của các yếu tố có liên quan trong quá trình sắp xếp lại.

Cú pháp

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

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Tùy chọn & Mô tả
1 appendTo

Tùy chọn này chỉ định phần tử trong đó phần tử mới được tạo với options.helper sẽ được chèn trong thời gian di chuyển / kéo. Theo mặc định, giá trị của nó làparent.

Option - appendTo

Tùy chọn này chỉ định phần tử trong đó phần tử mới được tạo với options.helper sẽ được chèn trong thời gian di chuyển / kéo. Theo mặc định, giá trị của nó làparent.

Điều này có thể thuộc loại -

  • Selector - Điều này cho biết một bộ chọn chỉ định phần tử nào để nối trình trợ giúp vào ..

  • jQuery - Điều này cho biết một đối tượng jQuery có chứa phần tử để nối trình trợ giúp vào.

  • Element - Một phần tử trong Mô hình Đối tượng Tài liệu (DOM) để nối trình trợ giúp vào.

  • String - Chuỗi "cha" sẽ khiến trình trợ giúp là anh chị em của mục có thể sắp xếp.

Syntax

$(".selector").sortable(
   { appendTo: document.body }
);
2 trục

Tùy chọn này chỉ ra một trục chuyển động ("x" là ngang, "y" là dọc). Theo mặc định, giá trị của nó làfalse.

Option - axis

Tùy chọn này chỉ ra một trục chuyển động ("x" là ngang, "y" là dọc). Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").sortable(
   { axis: "x" }
);
3 hủy bỏ

Tùy chọn này được sử dụng để ngăn việc sắp xếp các phần tử bằng cách nhấp vào bất kỳ phần tử nào của bộ chọn. Theo mặc định, giá trị của nó là"input,textarea,button,select,option".

Option - cancel

Tùy chọn này được sử dụng để ngăn việc sắp xếp các phần tử bằng cách nhấp vào bất kỳ phần tử nào của bộ chọn. Theo mặc định, giá trị của nó là"input,textarea,button,select,option".

Syntax

$(".selector").sortable(
   { cancel: "a,button" }
);
4 kết nối với

Tùy chọn này là một Bộ chọn xác định một phần tử có thể sắp xếp khác có thể chấp nhận các mục từ có thể sắp xếp này. Điều này cho phép các mục từ một danh sách được chuyển sang các danh sách khác, một tương tác người dùng thường xuyên và hữu ích. Nếu bỏ qua, không có phần tử nào khác được kết nối. Đây là mối quan hệ một chiều. Theo mặc định, giá trị của nó làfalse.

Option - connectWith

Tùy chọn này là một Bộ chọn xác định một phần tử có thể sắp xếp khác có thể chấp nhận các mục từ có thể sắp xếp này. Điều này cho phép các mục từ một danh sách được chuyển sang các danh sách khác, một tương tác người dùng thường xuyên và hữu ích. Nếu bỏ qua, không có phần tử nào khác được kết nối. Đây là mối quan hệ một chiều. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5 sự ngăn chặn

Tùy chọn này chỉ ra một phần tử mà sự dịch chuyển diễn ra trong đó. Phần tử sẽ được đại diện bởi một bộ chọn (chỉ mục đầu tiên trong danh sách mới được xem xét), một phần tử DOM hoặc chuỗi "cha" (phần tử mẹ) hoặc "cửa sổ" (trang HTML).

Option - containment

Tùy chọn này chỉ ra một phần tử mà sự dịch chuyển diễn ra trong đó.

Điều này có thể thuộc loại -

  • Selector- Điều này chỉ ra một bộ chọn. Phần tử sẽ được đại diện bởi một bộ chọn (chỉ mục đầu tiên trong danh sách mới được xem xét)

  • Element - Một phần tử DOM để sử dụng làm vùng chứa.

  • String- Chuỗi xác định một phần tử để sử dụng làm vùng chứa. Các giá trị có thể là cha (phần tử mẹ), tài liệu hoặc cửa sổ (trang HTML).

Syntax

$(".selector").sortable(
   { containment: "parent" }
);
6 con trỏ

Chỉ định thuộc tính CSS con trỏ khi phần tử di chuyển. Nó đại diện cho hình dạng của con trỏ chuột. Theo mặc định, giá trị của nó là "tự động".

Option - cursor

Chỉ định thuộc tính CSS con trỏ khi phần tử di chuyển. Nó đại diện cho hình dạng của con trỏ chuột. Theo mặc định, giá trị của nó là "tự động". Giá trị có thể là -

  • "crosshair" (ngang qua)
  • "default" (mũi tên)
  • "con trỏ" (bàn tay)
  • "di chuyển" (hai mũi tên chéo nhau)
  • "e-resize" (mở rộng sang bên phải)
  • "ne-resize" (mở rộng lên bên phải)
  • "nw-resize" (mở rộng lên bên trái)
  • "n-resize" (mở rộng lên)
  • "se-resize" (mở rộng xuống bên phải)
  • "sw-resize" (mở rộng xuống bên trái)
  • "s-resize" (mở rộng xuống)
  • "tự động" (mặc định)
  • "w-resize" (mở rộng sang trái)
  • "text" (con trỏ để viết văn bản)
  • "chờ" (đồng hồ cát)
  • "help" (con trỏ trợ giúp)

Syntax

$(".selector").sortable(
   { cursor: "move" }
);
7 con trỏ

Đặt độ lệch của trình trợ giúp kéo so với con trỏ chuột. Các tọa độ có thể được cung cấp dưới dạng một hàm băm bằng cách sử dụng kết hợp một hoặc hai phím: {trên cùng, trái, phải, dưới cùng}. Theo mặc định, giá trị của nó là "false".

Option - cursorAt

Đặt độ lệch của trình trợ giúp kéo so với con trỏ chuột. Các tọa độ có thể được cung cấp dưới dạng một hàm băm bằng cách sử dụng kết hợp một hoặc hai phím: {trên cùng, trái, phải, dưới cùng}. Theo mặc định, giá trị của nó là "false".

Syntax

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
số 8 sự chậm trễ

Độ trễ, tính bằng mili giây, sau đó sẽ tính đến chuyển động đầu tiên của chuột. Việc dịch chuyển có thể bắt đầu sau thời gian đó. Theo mặc định, giá trị của nó là "0".

Option - delay

Độ trễ, tính bằng mili giây, sau đó sẽ tính đến chuyển động đầu tiên của chuột. Việc dịch chuyển có thể bắt đầu sau thời gian đó. Theo mặc định, giá trị của nó là "0".

Syntax

$(".selector").sortable(
   { delay: 150 }
);
9 tàn tật

Tùy chọn này nếu được đặt thành true , sẽ tắt chức năng có thể sắp xếp. Theo mặc định, giá trị của nó làfalse.

Option - disabled

Tùy chọn này nếu được đặt thành true , sẽ tắt chức năng có thể sắp xếp. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").sortable(
   { disabled: true }
);
10 khoảng cách

Số pixel mà chuột phải được di chuyển trước khi bắt đầu sắp xếp. Nếu được chỉ định, việc sắp xếp sẽ không bắt đầu cho đến khi chuột được kéo vượt quá khoảng cách. Theo mặc định, giá trị của nó là "1".

Option - distance

Số pixel mà chuột phải được di chuyển trước khi bắt đầu sắp xếp. Nếu được chỉ định, việc sắp xếp sẽ không bắt đầu cho đến khi chuột được kéo vượt quá khoảng cách. Theo mặc định, giá trị của nó là "1".

Syntax

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

Tùy chọn này nếu được đặt thành false , thì không thể bỏ các mục từ có thể sắp xếp này trên một kết nối trống có thể sắp xếp. Theo mặc định, giá trị của nó làtrue.

Option - dropOnEmpty

Tùy chọn này nếu được đặt thành false , thì không thể bỏ các mục từ có thể sắp xếp này trên một kết nối trống có thể sắp xếp. Theo mặc định, giá trị của nó làtrue.

Syntax

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

Nếu tùy chọn này nếu được đặt thành true buộc người trợ giúp phải có kích thước. Theo mặc định, giá trị của nó làfalse.

Option - forceHelperSize

Nếu tùy chọn này nếu được đặt thành true buộc người trợ giúp phải có kích thước. Theo mặc định, giá trị của nó làfalse.

Syntax

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

Tùy chọn này khi được đặt thành true , sẽ tính đến kích thước của trình giữ chỗ khi một mục được di chuyển. Tùy chọn này chỉ hữu ích nếu options.placeholder được khởi tạo. Theo mặc định, giá trị của nó làfalse.

Option - forcePlaceholderSize

Tùy chọn này khi được đặt thành true , sẽ tính đến kích thước của trình giữ chỗ khi một mục được di chuyển. Tùy chọn này chỉ hữu ích nếu options.placeholder được khởi tạo. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").sortable(
   { forcePlaceholderSize: true }
);
14 lưới

Tùy chọn này là Mảng [x, y] cho biết số pixel mà phần tử sắp xếp di chuyển theo chiều ngang và chiều dọc trong quá trình di chuyển chuột. Theo mặc định, giá trị của nó làfalse.

Option - grid

Tùy chọn này là Mảng [x, y] cho biết số pixel mà phần tử sắp xếp di chuyển theo chiều ngang và chiều dọc trong quá trình di chuyển chuột. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").sortable(
   { grid: [ 20, 10 ] }
);
15 xử lý

Nếu được chỉ định, hãy hạn chế sắp xếp bắt đầu trừ khi quá trình tạm dừng xảy ra trên (các) phần tử được chỉ định. Theo mặc định, giá trị của nó làfalse.

Option - handle

Nếu được chỉ định, hãy hạn chế sắp xếp bắt đầu trừ khi quá trình tạm dừng xảy ra trên (các) phần tử được chỉ định. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").sortable(
   { handle: ".handle" }
);
16 người giúp đỡ

Cho phép sử dụng phần tử trợ giúp để kéo hiển thị. Theo mặc định, giá trị của nó làoriginal.

Option - helper

Cho phép sử dụng phần tử trợ giúp để kéo hiển thị. Theo mặc định, giá trị của nó làoriginal. Giá trị có thể là -

  • String - Nếu được đặt thành "clone", thì phần tử sẽ được nhân bản và bản sao sẽ bị kéo theo.

  • Function - Một hàm sẽ trả về một DOMElement để sử dụng trong khi kéo.

Syntax

$(".selector").sortable(
   { helper: "clone" }
);
17 mặt hàng

Tùy chọn này chỉ định các mục bên trong phần tử DOM sẽ được sắp xếp. Theo mặc định, giá trị của nó là> *.

Option - items

Tùy chọn này chỉ định các mục bên trong phần tử DOM sẽ được sắp xếp. Theo mặc định, giá trị của nó là> *

Syntax

$(".selector").sortable(
   { items: "> li" }
);
18 sự mờ đục

Tùy chọn này được sử dụng để xác định độ mờ của trình trợ giúp trong khi sắp xếp. Theo mặc định, giá trị của nó làfalse.

Option - opacity

Tùy chọn này được sử dụng để xác định độ mờ của trình trợ giúp trong khi sắp xếp. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").sortable(
   { opacity: 0.5 }
);
19 giữ chỗ

Tùy chọn này được sử dụng cho tên lớp được áp dụng cho khoảng trắng khác. Theo mặc định, giá trị của nó là false.

Option - placeholder

Syntax

$(".selector").sortable(
   { addClasses: false }
);
20 hoàn nguyên

Tùy chọn này quyết định xem các mục có thể sắp xếp có trở lại vị trí mới của chúng hay không bằng cách sử dụng hoạt ảnh mượt mà. Theo mặc định, giá trị của nó làfalse.

Option - revert

Tùy chọn này quyết định xem các mục có thể sắp xếp có trở lại vị trí mới của chúng hay không bằng cách sử dụng hoạt ảnh mượt mà. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").sortable(
   { revert: true }
);
21 cuộn giấy

Tùy chọn này được sử dụng để kích hoạt tính năng cuộn. Nếu được đặt thành true , trang sẽ cuộn khi đến một cạnh. Theo mặc định, giá trị của nó làtrue.

Option - scroll

Tùy chọn này được sử dụng để kích hoạt tính năng cuộn. Nếu được đặt thành true , trang sẽ cuộn khi đến một cạnh. Theo mặc định, giá trị của nó làtrue.

Syntax

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

Tùy chọn này cho biết chuột phải thoát khỏi vùng hiển thị bao nhiêu pixel để thực hiện thao tác cuộn. Theo mặc định, giá trị của nó là20. Tùy chọn này chỉ được sử dụng với options.scroll được đặt thành true.

Option - scrollSensitivity

Tùy chọn này cho biết chuột phải thoát khỏi vùng hiển thị bao nhiêu pixel để thực hiện thao tác cuộn. Theo mặc định, giá trị của nó là20. Tùy chọn này chỉ được sử dụng với options.scroll được đặt thành true.

Syntax

$(".selector").sortable(
   { scrollSensitivity: 10 }
);
23 tốc độ cuộn

Tùy chọn này cho biết tốc độ cuộn của màn hình sau khi quá trình cuộn bắt đầu. Theo mặc định, giá trị của nó là20.

Option - scrollSpeed

Tùy chọn này cho biết tốc độ cuộn của màn hình sau khi quá trình cuộn bắt đầu. Theo mặc định, giá trị của nó là20.

Syntax

$(".selector").sortable(
   { scrollSpeed: 40 }
);
24 lòng khoan dung

Tùy chọn này là một Chuỗi chỉ định chế độ nào sẽ sử dụng để kiểm tra xem mục đang được di chuyển có di chuột qua một mục khác hay không. Theo mặc định, giá trị của nó là"intersect".

Option - tolerance

Tùy chọn này là một Chuỗi chỉ định chế độ nào sẽ sử dụng để kiểm tra xem mục đang được di chuyển có di chuột qua một mục khác hay không. Theo mặc định, giá trị của nó là"intersect"Các giá trị có thể là -

  • intersect - Mặt hàng này chồng lên mặt hàng kia ít nhất 50%.

  • pointer - Con trỏ chuột chồng lên mục khác.

Syntax

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

Tùy chọn này đại diện cho chỉ số z cho phần tử / trình trợ giúp trong khi được sắp xếp. Theo mặc định, giá trị của nó là1000.

Option - zIndex

Tùy chọn này đại diện cho chỉ số Z cho phần tử / trình trợ giúp trong khi được sắp xếp. Theo mặc định, giá trị của nó là1000.

Syntax

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

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động của chức năng kéo.

Chức năng mặc định

Ví dụ sau minh họa một ví dụ đơn giản về chức năng có thể sắp xếp, không chuyển tham số nào cho sortable() phương pháp.

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML sortexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Sắp xếp lại các sản phẩm bên trên, sử dụng chuột để kéo các mục.

Sử dụng các tùy chọn Độ trễ và Khoảng cách

Ví dụ sau minh họa việc sử dụng ba tùy chọn (a) delay và (b) distance trong chức năng sắp xếp của JqueryUI.

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML sortexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Sắp xếp lại các sản phẩm bên trên, sử dụng chuột để kéo các mục. Để ngăn việc sắp xếp ngẫu nhiên theo độ trễ (thời gian) hoặc khoảng cách, chúng tôi đã đặt số mili giây phần tử cần được kéo trước khi bắt đầu sắp xếp với tùy chọn độ trễ . Chúng tôi cũng đã đặt khoảng cách tính bằng pixel mà phần tử cần được kéo trước khi bắt đầu sắp xếp với tùy chọn khoảng cách .

Sử dụng Trình giữ chỗ

Ví dụ sau minh họa việc sử dụng tùy chọn ba placeholder trong chức năng sắp xếp của JqueryUI.

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML sortexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Cố gắng kéo các mục để sắp xếp lại chúng, trong khi bạn đang kéo các mục, trình giữ chỗ (chúng tôi đã sử dụng lớp đánh dấu để tạo kiểu cho không gian này) sẽ hiển thị trên một vị trí có sẵn.

Sử dụng các tùy chọn Connectwith và Droponempty

Ví dụ sau minh họa việc sử dụng ba tùy chọn (a) connectWith và (b) dropOnEmpty trong chức năng sắp xếp của JqueryUI.

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML sortexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Sắp xếp các mục từ Danh sách1 này sang Danh sách khác (Danh sách2) và ngược lại, bằng cách chuyển một bộ chọn vào tùy chọn connectWith . Điều này được thực hiện bằng cách nhóm tất cả các danh sách có liên quan với một lớp CSS, rồi chuyển lớp đó vào hàm có thể sắp xếp (tức là connectWith: '# sortable-5, # sortable-6').

Cố gắng kéo các mục trong Danh sách 3 sang Danh sách 2 hoặc Danh sách 1. Vì chúng tôi đã đặt tùy chọn dropOnEmpty thành false , nên sẽ không thể thả các mục này.

Phương thức $ (selector, context) .sortable ("action", [params])

Phương thức sắp xếp (action, params) có thể thực hiện một hành động trên các phần tử có thể sắp xếp, chẳng hạn như để ngăn chặn sự dịch chuyển. Cácaction được chỉ định dưới dạng một chuỗi trong đối số đầu tiên và tùy chọn, một hoặc nhiều params có thể được cung cấp dựa trên hành động đã cho.

Về cơ bản, ở đây các hành động không là gì cả nhưng chúng là các phương thức jQuery mà chúng ta có thể sử dụng ở dạng chuỗi.

Cú pháp

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

Bảng sau liệt kê các hành động cho phương pháp này:

Sr.No. Mô tả hành động
1 hủy bỏ ()

Hành động này hủy thao tác sắp xếp hiện tại. Điều này hữu ích nhất trong các trình xử lý cho việc nhận sắp xếp và sắp xếp các sự kiện dừng. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - cancel()

Hủy thao tác sắp xếp hiện tại. Điều này hữu ích nhất trong các trình xử lý cho việc nhận sắp xếp và sắp xếp các sự kiện dừng. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").sortable("cancel");
2 hủy hoại()

Hành động này sẽ loại bỏ hoàn toàn chức năng sắp xếp. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - destroy()

Hành động này sẽ loại bỏ hoàn toàn chức năng sắp xếp. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").sortable("destroy");
3 vô hiệu hóa()

Hành động này vô hiệu hóa khả năng sắp xếp của bất kỳ phần tử có thể sắp xếp nào trong tập hợp được bao bọc. Khả năng sắp xếp của các phần tử không bị xóa và có thể được khôi phục bằng cách gọi biến thể enable của phương thức này. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - disable()

Hành động này vô hiệu hóa khả năng sắp xếp của bất kỳ phần tử có thể sắp xếp nào trong tập hợp được bao bọc. Khả năng sắp xếp của các phần tử không bị xóa và có thể được khôi phục bằng cách gọi biến thể enable của phương thức này. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").sortable("disable");
4 cho phép ()

Bật lại khả năng sắp xếp trên bất kỳ phần tử có thể sắp xếp nào trong tập hợp được bao bọc có khả năng sắp xếp đã bị vô hiệu hóa. Lưu ý rằng phương pháp này sẽ không thêm khả năng sắp xếp cho bất kỳ phần tử không thể sắp xếp nào. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - enable()

Bật lại khả năng sắp xếp trên bất kỳ phần tử có thể sắp xếp nào trong tập hợp được bao bọc có khả năng sắp xếp đã bị vô hiệu hóa. Lưu ý rằng phương pháp này sẽ không thêm khả năng sắp xếp cho bất kỳ phần tử không thể sắp xếp nào. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

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

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định . Trong đó optionName là tên của tùy chọn cần lấy.

Action - option( optionName )

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định . Trong đó optionName là tên của tùy chọn cần lấy.

Syntax

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6 Lựa chọn()

Lấy một đối tượng chứa các cặp khóa / giá trị đại diện cho hàm băm tùy chọn có thể sắp xếp hiện tại .. Phương thức này không chấp nhận bất kỳ đối số nào.

Action - option()

Lấy một đối tượng chứa các cặp khóa / giá trị đại diện cho hàm băm tùy chọn có thể sắp xếp hiện tại .. Phương thức này không chấp nhận bất kỳ đối số nào.

Syntax

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

Hành động này đặt giá trị của tùy chọn có thể sắp xếp được liên kết với optionName được chỉ định . Trong đó optionName là tên của tùy chọn để đặt và value là giá trị để đặt cho tùy chọn.

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn có thể sắp xếp được liên kết với optionName được chỉ định . Trong đó optionName là tên của tùy chọn để đặt và value là giá trị để đặt cho tùy chọn.

Syntax

$(".selector").sortable("option", "disabled", true);
số 8 option (tùy chọn)

Đặt một hoặc nhiều tùy chọn cho có thể sắp xếp. Trong đó các tùy chọn là một bản đồ của các cặp giá trị tùy chọn cần đặt.

Action - option( options )

Đặt một hoặc nhiều tùy chọn cho có thể sắp xếp. Trong đó các tùy chọn là một bản đồ của các cặp giá trị tùy chọn cần đặt.

Syntax

$( ".selector" ).sortable( "option", { disabled: true } );
9 Làm tươi()

Hành động này làm mới danh sách các mục nếu cần thiết. Phương pháp này không chấp nhận bất kỳ đối số nào. Gọi phương thức này sẽ khiến các mục mới được thêm vào có thể sắp xếp được nhận dạng.

Action - refresh()

Hành động này làm mới danh sách các mục nếu cần thiết. Phương pháp này không chấp nhận bất kỳ đối số nào. Gọi phương thức này sẽ khiến các mục mới được thêm vào có thể sắp xếp được nhận dạng.

Syntax

$(".selector").sortable("refresh");
10 toArray (tùy chọn)

Phương thức này trả về một mảng các giá trị id của các phần tử có thể sắp xếp theo thứ tự được sắp xếp. Phương thức này lấy Tùy chọn làm tham số, để tùy chỉnh tuần tự hóa hoặc thứ tự đã sắp xếp.

Action - toArray( options )

Phương thức này trả về một mảng các giá trị id của các phần tử có thể sắp xếp theo thứ tự được sắp xếp. Phương thức này lấy Tùy chọn làm tham số, để tùy chỉnh tuần tự hóa hoặc thứ tự đã sắp xếp.

Syntax

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11 tuần tự hóa (tùy chọn)

Phương thức này trả về một chuỗi truy vấn được tuần tự hóa (có thể gửi qua Ajax) được hình thành từ có thể sắp xếp.

Action - serialize( options )

Phương thức này trả về một chuỗi truy vấn được tuần tự hóa (có thể gửi qua Ajax) được hình thành từ có thể sắp xếp. Nó hoạt động theo mặc định bằng cách xem id của từng mục ở định dạng "setname_number" và nó tạo ra một hàm băm như "setname [] = number & setname [] = number".

Syntax

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

Phương pháp này được sử dụng chủ yếu trong nội bộ để làm mới thông tin đã lưu trong bộ nhớ cache của loại có thể sắp xếp. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - refreshPositions()

Phương pháp này được sử dụng chủ yếu trong nội bộ để làm mới thông tin đã lưu trong bộ nhớ cache của loại có thể sắp xếp. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

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

Phương thức này trả về một đối tượng jQuery có chứa phần tử có thể sắp xếp. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - widget()

Phương thức này trả về một đối tượng jQuery có chứa phần tử có thể sắp xếp. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

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

Thí dụ

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng phương thức 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML sortexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Hãy thử phân loại các mục, thứ tự các mục được hiển thị ở phía dưới. Ở đây chúng tôi đang gọi $ (this) .sortable ('toArray'). ToString () , sẽ cung cấp một danh sách chuỗi gồm tất cả các id mục, nó có thể giống như1,2,3,4.

Quản lý sự kiện trên các yếu tố có thể sắp xếp

Ngoài phương thức có thể sắp xếp (tùy chọn) mà chúng ta đã thấy trong các phần trước, JqueryUI cung cấp các phương thức sự kiện khi được kích hoạt cho một sự kiện cụ thể. Các phương thức sự kiện này được liệt kê bên dưới -

Sr.No. Phương pháp & Mô tả Sự kiện
1 kích hoạt (sự kiện, ui)

Sự kiện này được kích hoạt trên có thể sắp xếp khi thao tác sắp xếp bắt đầu trên có thể sắp xếp được kết nối.

Event - activate(event, ui)

Sự kiện này được kích hoạt trên có thể sắp xếp khi hoạt động sắp xếp bắt đầu trên có thể sắp xếp được kết nối. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
2 beforeStop (sự kiện, ui)

Sự kiện này được kích hoạt khi thao tác sắp xếp sắp kết thúc, với tham chiếu phần tử trình trợ giúp và trình giữ chỗ vẫn hợp lệ.

Event - beforeStop(event, ui)

Sự kiện này được kích hoạt khi thao tác sắp xếp sắp kết thúc, với tham chiếu phần tử trình trợ giúp và trình giữ chỗ vẫn hợp lệ. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
3 thay đổi (sự kiện, ui)

Sự kiện này được kích hoạt khi phần tử được sắp xếp thay đổi vị trí trong DOM.

Event - change(event, ui)

Sự kiện này được kích hoạt khi phần tử được sắp xếp thay đổi vị trí trong DOM. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
4 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi có thể sắp xếp được tạo.

Event - create(event, ui)

Sự kiện này được kích hoạt khi có thể sắp xếp được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Đối tượng ui trống nhưng được bao gồm để nhất quán với các sự kiện khác.

Syntax

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
5 hủy kích hoạt (sự kiện, ui)

Sự kiện này được kích hoạt khi sắp xếp được kết nối dừng lại, được truyền tới có thể sắp xếp được kết nối.

Event - deactivate(event, ui)

Sự kiện này được kích hoạt khi sắp xếp được kết nối dừng lại, được truyền tới có thể sắp xếp được kết nối. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
6 out (sự kiện, ui)

Sự kiện này được kích hoạt khi mục sắp xếp được di chuyển khỏi danh sách được kết nối.

Event - out(event, ui)

Sự kiện này được kích hoạt khi mục sắp xếp được di chuyển khỏi danh sách được kết nối. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
7 kết thúc (sự kiện, ui)

Sự kiện này được kích hoạt khi một mục sắp xếp di chuyển vào danh sách được kết nối.

Event - over(event, ui)

Sự kiện này được kích hoạt khi một mục sắp xếp di chuyển vào danh sách được kết nối. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
số 8 nhận (sự kiện, ui)

Sự kiện này được kích hoạt khi một danh sách được kết nối đã nhận được một mục sắp xếp từ một danh sách khác.

Event - receive(event, ui)

Sự kiện này được kích hoạt khi một danh sách được kết nối đã nhận được một mục sắp xếp từ một danh sách khác. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
9 loại bỏ (sự kiện, ui)

Sự kiện này được kích hoạt khi mục sắp xếp bị xóa khỏi danh sách được kết nối và được kéo vào một mục khác.

Event - remove(event, ui)

Sự kiện này được kích hoạt khi mục sắp xếp bị xóa khỏi danh sách được kết nối và được kéo vào một mục khác. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
10 sắp xếp (sự kiện, ui)

Sự kiện này được kích hoạt lặp lại cho các sự kiện di chuyển chuột trong một hoạt động sắp xếp.

Event - sort(event, ui)

Sự kiện này được kích hoạt lặp lại cho các sự kiện di chuyển chuột trong một hoạt động sắp xếp. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
11 bắt đầu (sự kiện, ui)

Sự kiện này được kích hoạt khi thao tác sắp xếp bắt đầu.

Event - start(event, ui)

Sự kiện này được kích hoạt khi thao tác sắp xếp bắt đầu. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
12 dừng lại (sự kiện, ui)

Sự kiện này được kích hoạt khi hoạt động sắp xếp kết thúc.

Event - stop(event, ui)

Sự kiện này được kích hoạt khi hoạt động sắp xếp kết thúc. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
13 cập nhật (sự kiện, ui)

Sự kiện này được kích hoạt khi hoạt động sắp xếp dừng lại và vị trí của mục đã được thay đổi.

Event - update(event, ui)

Sự kiện này được kích hoạt khi hoạt động sắp xếp dừng lại và vị trí của mục đã được thay đổi. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được sắp xếp.

  • item - Một đối tượng jQuery đại diện cho phần tử được kéo hiện tại.

  • offset - Vị trí tuyệt đối hiện tại của người trợ giúp được biểu thị là {trên cùng, bên trái} ..

  • position - Vị trí CSS hiện tại của trình trợ giúp là đối tượng {trên cùng, bên trái}.

  • originalPosition - Vị trí ban đầu của phần tử biểu diễn là {trên cùng, bên trái}.

  • sender - Khả năng sắp xếp của mục đó nếu chuyển từ có thể sắp xếp này sang có thể sắp xếp khác.

  • placeholder - Đối tượng jQuery đại diện cho phần tử đang được sử dụng làm trình giữ chỗ.

Syntax

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

Thí dụ

Ví dụ sau minh họa việc sử dụng phương thức sự kiện trong chức năng thả. Ví dụ này minh họa việc sử dụng các sự kiện nhận , bắt đầu và dừng .

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML sortexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Hãy thử sắp xếp các mục trong Danh sách 1, bạn sẽ thấy thông báo được hiển thị khi bắt đầu và dừng sự kiện. Bây giờ thả các mục từ Danh sách 2 sang Danh sách 1, một lần nữa một thông báo sẽ hiển thị trên sự kiện nhận .

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved