Trước đây mình đã có một bài viết hướng dẫn Tạo chức năng kéo thả với jQuery UI Sortable , hôm nay mình sẽ giới thiệu thêm cho các bạn một plugin khác nữa, plugin này rất dễ sử dụng và hoàn toàn có thể áp dụng cho hầu hết các phần tử html.

Xem Demo | Download

HTML

Giả sử chúng ta cần kéo thả các phần tử trong danh sách như đoạn html bên dưới.

<ul class="sortable">
    <li>Item 1
    <li>Item 2
    <li>Item 3
    <li>Item 4
</ul>

jQuery

Để có thể sắp xếp lại các phần tử thì các bạn chỉ đơn giản đặt đoạn script như sau:

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.sortable.js"></script>
<script>
    $('.sortable').sortable();
</script>

Ngoài ra các bạn còn có thể tùy chỉnh theo như ý muốn như :

 – Sử dụng class .sortable-dragging và .sortable-placeholder để định dạng cho placeholder.

–  Dùng sự kiện sortupdate để lưu lại nếu như các bạn muốn thay đổi vị trí sau khi kết thúc kéo thả.

$('.sortable').sortable().bind('sortupdate', function() {
    //Triggered when the user stopped sorting and the DOM position has changed.
});

– Sử dụng lựa chọn items để chỉ định những phần tử nào không được kéo thả.

$('.sortable').sortable({
    items: ':not(.disabled)'
});

– Sử dụng lựa chọn handle dành cho những phần tử có handle đi theo.

$('.sortable').sortable({
    handle: '.handle'
});

– Để có thể kết nối 2 danh sách lại với nhau, chúng ta dùng thuộc tính connectWith.

$('#sortable1, #sortable2').sortable({
    connectWith: '.connected'
});

– Để xóa bỏ hoàn toàn chức năng kéo thả, thì dùng đoạn lệnh sau.

$('.sortable').sortable('destroy');

– Vô hiệu hóa tạm thời

$('.sortable').sortable('disable');

– Bật lại chức năng kéo thả

$('.sortable').sortable('enable');

Mình mong là các bạn có thể ứng dụng plugin này cho những ứng dụng trên web/blog của các bạn.

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster