Share Kéo thả một thành phần với thư viện jQuery UI Draggable

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Khi các bạn muốn dùng chuột di chuyển một thành phần nào đó trên website, ví dụ như kéo thả để sắp xếp nội dung, kéo thả một thành phần từ vị trí này tới vị trí khác thì các bạn có thể sử dụng thư viện jQuery UI Draggable. Thư viện jQuery UI Draggable là một thành phần trong bộ thư viện jQuery UI được sử dụng phổ biến hiện nay, đây là bộ thư viện được chính nhà phát triển jQuery phát triển nên đảm bảo tương thích hoàn toàn với jQuery.

Để 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 Draggable với nội dung mã lệnh như sau:
JavaScript:
$(function() {
    $('#draggable').draggable();
});
Sau đó để áp dụng kéo thả với một thành phần nào đó các bạn tham khảo ví dụ sau:
HTML:
<div id="draggable" class="ui-widget-content">Drap me</div>
Các bạn có thể tìm hiểu thêm về thư viện jQuery UI Draggable tại địa chỉ http://jqueryui.com/draggable. Ngoài ra, các bạn cũng nên tìm hiểu thêm thư viện jQuery UI Droppable tại địa chỉ http://jqueryui.com/droppable.
 
Back
Top