Chức năng kéo thả rất hữu dụng và được sử dụng rất nhiều ở trang web, đặc biệt là phần back end. Hôm nay mình sẽ chia sẻ với các bạn cách sử dụng chức năng kéo thả từ jQuery UI từng bước một. Kết quả mà chúng ta sẽ nhận được như sau :
Bước 1 : Chuần bị các file cần thiết.
Các bạn chèn đoạn khai báo bên dưới ngay sau thẻ <head>
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
Bước 2 : HTML Markup
Để có thể tạo demo minh họa, các bạn tạo bộ khung html như sau :
<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>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
Bước 3 : Kích hoạt UI Sortable
Để sử dụng chức năng kéo thả, các bạn chỉ cần copy đoạn code bên dưới và đặt ngay bên trên trước </head> :
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-sortable-placeholder"
});
});
</script>
Vào tại thời điểm này, thì các bạn có thể kéo thả các phần tử theo ý muốn.
Bước 4 : Định dạng CSS
Trước hết , chúng ta cần có bộ font để tạo icon . Các bạn có thể download bộ font tại đây. Giải nén nó và đặt nó vào folder font. Sau đó chèn đoạn css sau vào file style.css
@font-face {
font-family: "FontAwesome";
src: url('font/fontawesome-webfont.eot');
src: url('font/fontawesome-webfont.eot?#iefix') format('eot'),
url('font/fontawesome-webfont.woff') format('woff'),
url('font/fontawesome-webfont.ttf') format('truetype'),
url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
Kế đến là định dạng cho màu nền và chiều rộng của UI Sortable, rồi canh giữa nó như sau :
body {
background-color: #333;
}
.ui-sortable {
width: 350px;
margin: 50px auto;
background-color: #ccc;
-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
list-style-type: none;
padding: 0;
}
Lúc này chúng ta sẽ có kết quả thế này :
Kế tiếp chúng ta sẽ định dạng cho từng phần tử <li>, những phần tử này sẽ chứa màu nền gradient, chiều dài của phần tử…
.ui-sortable li.ui-state-default {
margin: 0;
height: 45px;
line-height: 48px;
font-size: 1.4em;
color: #fff;
outline: 0;
padding: 0;
margin: 0;
text-indent: 15px;
background: rgb(78,82,91);
background: -moz-linear-gradient(top, rgb(78,82,91) 0%, rgb(57,61,68) 100%);
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,rgb(78,82,91)), color-stop(100%,rgb(57,61,68)));
background: -webkit-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: -o-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: -ms-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: linear-gradient(to bottombottom, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
border-top: 1px solid rgba(255,255,255,.2);
border-bottom: 1px solid rgba(0,0,0,.5);
text-shadow: -1px -1px 0px rgba(0,0,0,.5);
font-size: 1.1em;
position: relative;
cursor: pointer;
}
.ui-sortable li.ui-state-default:first-child {
border-top: 0;
}
.ui-sortable li.ui-state-default:last-child {
border-bottom: 0;
}
Sau khi chèn những thuộc tính này vào, chúng ta sẽ có kết quả như sau:
Khi một phần tử được kéo đi, thì chỗ trống sẽ có khoảng trắng trống, vì thế chúng ta sẽ định dạng màu nền xám .
.ui-sortable-placeholder {
border: 3px dashed #aaa;
height: 45px;
width: 344px;
background: #ccc;
}
Bây giờ thì khi chúng ta kéo thả, thì chỗ trống đã được tô màu.
Tạo biểu tượng kéo thả
Bây giờ là lúc chúng ta tạo icon cho các phần tử, chúng ta đã chèn font ở phần đầu tiên, nên giờ chúng ta sẽ lấy nó để tạo icon. Nếu các bạn muốn có lựa chọn icon khác thì có thể xem bài viết Tạo icon bộ Font Awesome bằng CSS
.ui-sortable li.ui-state-default:after {
content: "\f0c9";
display: inline-block;
font-family: "FontAwesome";
position: absolute;
rightright: 18px;
top: 9px;
text-align: center;
line-height: 35px;
color: rgba(255,255,255,.2);
text-shadow: 0px 0px 0px rgba(0,0,0,0);
cursor: move;
}
Đó là tất cả những gì mà chúng ta cần làm, việc cuối cùng là kiểm tra lại kết quả mà chúng ta làm nãy giờ.