Share Sắp xếp các thành phần với thư viện jQuery UI Sortable

filiallion · 04/16/2018

Khi các bạn muốn sắp xếp các thành phần trong danh sách bằng cách kéo thả thì các bạn có thể sử dụng thư viện jQuery UI Sortable. Việc sử dụng kéo thả để sắp xếp các thành phần giúp cho website có tính tương tác cao với người dùng và luôn tạo cảm giác thoải mái, chuyên nghiệp đối với người dùng. Thư viện jQuery UI Sortable là một thành phần trong bộ thư viện jQuery UI được sử dụng phổ biến hiện nay. Việc sử dụng thành phần Sortable của thư viện jQuery UI cũng tương tự với các thành phần khác mà tôi đã giới thiệu trước đây.

Để sử dụng thư viện jQuery UI các bạn cần phải tích hợp thư viện jQuery. Các bạn tải thư viện jQuery tại địa chỉ http://jquery.com/download. Ngoài ra, trong gói thư viện jQuery UI cũng đã có sẵn thư viện jQuery để các bạn tích hợp.

Các bạn tải gói thư viện jQuery UI tại địa chỉ http://jqueryui.com/download. Tại trang tải thư viện, các bạn có thể chọn các thành phần mà các bạn cần dùng cũng như chọn mẫu giao diện các bạn muốn sử dụng.

Các bạn tích hợp thư viện jQuery UI vào website với nội dung mã lệnh như sau:

HTML:

<link href="path/to/jquery-ui.min.css" rel="stylesheet">
<script src="path/to/jquery-ui.min.js"></script>

Và cài đặt thư viện jQuery UI Sortable với nội dung mã lệnh như sau:

JavaScript:

$(function() {
    $('#sortable').sortable()
                  .disableSelection();
});

Sau đó để áp dụng sắp xếp với một danh sách nào đó các bạn tham khảo ví dụ sau:

HTML:

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
</ul>

Các bạn có thể tìm hiểu thêm về thư viện jQuery UI Sortable tại địa chỉ http://jqueryui.com/sortable.

Share Sắp xếp các thành phần với thư viện jQuery UI Sortable

filiallion

Administrator