Tìm hiểu về sortable table trong JQuery

Xin chào các bạn. Hôm nay mình sẽ giới thiệu với các bạn 1 thư viện jquery cho phép chúng ta có thể kéo thả và sắp xếp các danh sách hay 1 menu một cách trực quan nhất. 'JQuery Sortable' là tất cả những gì mà chúng ta cần để làm được điều đó.

• Cho phép sắp xếp bất cứ item nào trong bất cứ container nào mà bạn muốn.
• Hỗ trợ đầy đủ các container lồng nhau.
• Kết nối các danh sách.
• Callback và event.
• Hỗ trợ việc kéo thả các danh sách.
• Sắp xếp theo chiều đứng và chiều ngang.

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

1. Xây dựng 1 danh sách cho phép kéo thả

• Dưới đây tôi sẽ xây dựng 1 danh sách các item. Ở đó cho phép chúng ta kéo thả các item lên trên hoặc xuống dưới 1 item nào đó trong danh sách này. Nào hãy bắt tay xây dựng nào.

<div class="container">
	<div class="span4">
        <ul class="example vertical">
            <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>
    </div>
</div>

$(function() {
  	$("ol.example").sortable();
});

Nhớ thêm 1 chút gia vị của css vào nha ( để nhìn đẹp hơn chút mà