Hướng dẫn sử dụng sortable của jQuery UI

I. Tổng quan về sortable

• sortable là một thư viện jquery cho phép sắp xếp các object bằng giao diện kéo thả trực quan.
• sortable hỗ trợ sắp xếp trong 1 list và trao đổi giữa các list.
• Ngoài ra, sortable còn hỗ trợ disabled các items đặc biệt.

II. Cài đặt

sortable có sẵn trong jQuery và được hỗ trợ trong các trình duyệt:

• Firefox >= 3.5
• Chrome
• IE > 7
• Safari >= 6
• Opera
• Konqueror

III. Các cách sử dụng sortable

1. Sắp xếp trong 1 list item thông thường:

• Trong file html, tạo một list các items như sau:

<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

• Trong file js thêm một câu lệnh đơn giản:

$(function() {
    $("#sortable").sortable();
});

• Vậy là xong, ta đã có một ví dụ cực đơn giản cho việc sử dụng sortable thật dễ dàng.

2. Trao đổi items trong các list khác nhau:

• Một trường hợp phức tạp hơn là sắp xếp và trao đổi các items trong các list khác nhau, để tìm hiểu trường hợp này, ta xây dựng 2 list items trong file html như sau:

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

• Trong file js, chỉ cần thêm một chút thay đổi như sau:

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    });
});

• Thật đơn giản, giờ ta có thể dễ dàng sắp xếp các items trong 2 list và trao đổi với nhau.

3. Disabled các items đặc biệt:

• Trường hợp các items bị disabled có vị trí cố định, ta chỉ có thể sắp xếp các items bên trong hoặc bên ngoài các items bị disabled. Ví dụ cho trường hợp này như sau:

<ul id="sortable1">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
  <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
  <li class="ui-state-default">Item 4</li>
</ul>

$( function() {
    $( "#sortable1" ).sortable({
      items: "li:not(.ui-state-disabled)"
    });
});

• Trường hợp các items bị disabled không có vị trí cố định, ta có thể sắp xếp xen kẽ các items khác nhưng không thể kéo thả các items đã bị disabled. Ví dụ cho trường hợp này như sau:

<ul id="sortable2">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
  <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
  <li class="ui-state-default">Item 4</li>
</ul>

$( function() { 
    $( "#sortable2" ).sortable({
      cancel: ".ui-state-disabled"
    });
 });

V. Kết luận

Trên đây là một ví dụ cơ bản nhất trong việc sử dụng sortable của jQuery UI. Hi vọng bài viết có thể cung cấp cách nhìn tổng quan, dễ hiểu nhất cho những bạn mới tiếp xúc với các thư viện đơn giản của jQuery. Chúng ta có thể khai thác rất nhiều thư viện khác của jQuery qua trang chính thức: http://jqueryui.com.