Thư viện JQuery-UI này mình cũng tìm thấy trong AdminLTE
Trang official của thư viện này: Sortable | jQuery UI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connected Sortable</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
$( "#resizable" ).resizable();
});
</script>
<style>
.connectedSortable { list-style-type: none; margin: 0; padding: 0; width: 200px; }
.connectedSortable li { margin: 5px; padding: 5px; height: 1.5em; font-size: 1.2em; }
ul li {cursor: move; }
</style>
</head>
<body>
<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>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item A</li>
<li class="ui-state-default">Item B</li>
<li class="ui-state-default">Item C</li>
</ul>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
Giải thích code:
01 - thư viện này muốn xài được phải cài kèm 03 files sau:
+ jquery file js
+ 02 file css và js của jquery-ui (có thể custom sâu hơn nữa 02 files này...)
02 - Phần thẻ style chỉ là cho đẹp thôi
03 - thẻ script là dùng gán khả năng sortable cho 02 thẻ có id #sortable1, #sortable2
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
Nếu chúng ta chỉ có 01 danh sách thì đơn giản điền chỗ này 01 id...có bao nhiêu danh sách thì cứ bỏ vô đây.
Khi đã gán id="sortable" cho thẻ nào thì các thẻ con và class của thẻ đó sẽ tự động được gán 01 số thuộc tính đi kèm (bấm Ctr + Shift + I để xem chi tiết) => chỉ nên gán id này cho thẻ gần danh sách sortable nhất.
Còn nhiều tính năng khá thú vị khác mình sẽ đề cập trong bài viết sau.
Hiện tại mình chỉ chú ý thêm tính năng resizable cho element html
thêm đoạn mã trong phần function
$( "#resizable" ).resizable();
test dưới html là xong
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
Sưu tầm bởi #drM
Không có nhận xét nào:
Đăng nhận xét