Có rất nhiều câu trả lời về việc sử dụng giao diện người dùng jQuery để thực hiện kéo và thả, hầu hết trong số đó đã lỗi thời và năm cũ. Plugin tốt nhất vào năm 2016 để triển khai Drag n Drop cho hàng bảng với jQuery (không có jQuery UI) là gì?Kéo và thả hàng của bảng JS mà không có giao diện người dùng Jquery trong năm 2016
5
A
Trả lời
9
Chúc ngày tốt lành, Yongke Yu! Thử thư viện của Konstanin Levedev— «Sortable» (~ 6KB). Trong NPM - «sortablejs». Thư viện này rất linh hoạt, không có sự phụ thuộc, với sự hỗ trợ cảm ứng, với khả năng thêm các mục khi đang di chuyển.
Tôi đã làm một demo cho bạn. Hãy thử thêm và xóa các hàng và sắp xếp lại chúng.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS table row drag and drop without Jquery UI in 2016</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
</head>
<body>
<div class="recipe">
<div class="recipe__info">
<h2 class="recipe__title">Banana muffins recipe</h2>
<p>These healthy muffins are the perfect treat for when you are feeling something sweet. It is so much better to bake muffins yourself as you can choose exactly what you put in them, meaning you can stay away from refined sugars and preservatives! These are perfect for bringing to a brunch or just sharing with your friends.
</p>
</div>
<div class="recipe__ingredients">
<table cellpadding="0" cellspacing="0" border="0" class="recipe-table" id="recipeTable">
<tbody id="recipeTableBody">
<tr>
<td class="drag-handler"></td>
<td class="recipe-table__cell">
<input type="text" class="recipe__text-field" value="Large bananas" placeholder="Ingredient">
</td>
<td class="recipe-table__cell">
<input type="text" class="recipe__text-field" value="3" placeholder="Value">
</td>
<td class="recipe-table__cell">
<button class="recipe-table__del-row-btn">x</button>
</td>
</tr>
<tr>
<td class="drag-handler"></td>
<td class="recipe-table__cell">
<input type="text" class="recipe__text-field" value="White sugar" placeholder="Ingredient">
</td>
<td class="recipe-table__cell">
<input type="text" class="recipe__text-field" value="¹⁄₂" placeholder="Value">
</td>
<td class="recipe-table__cell">
<button class="recipe-table__del-row-btn">x</button>
</td>
</tr>
<tr>
<td class="drag-handler"></td>
<td class="recipe-table__cell">
<input type="text" class="recipe__text-field" value="Egg" placeholder="Ingredient">
</td>
<td class="recipe-table__cell">
<input type="text" class="recipe__text-field" value="1" placeholder="Value">
</td>
<td class="recipe-table__cell">
<button class="recipe-table__del-row-btn">x</button>
</td>
</tr>
</tbody>
</table>
<div class="recipe-table__add-row">
<span class="recipe-table__add-row-btn">+</span>
</div>
</div>
</div>
<script id="rowTemplate" type="text/template">
<tr>
<td class="drag-handler"></td>
<td class="recipe-table__cell">
<input type="text" class="recipe__text-field" value="" placeholder="Ingredient">
</td>
<td class="recipe-table__cell">
<input type="text" class="recipe__text-field" value="" placeholder="Value">
</td>
<td class="recipe-table__cell">
<button class="recipe-table__del-row-btn">x</button>
</td>
</tr>
</script>
</body>
</html>
CSS:
body {
font-size: 14px;
}
.recipe {
padding: 1em;
}
.recipe__title {
margin-top: 0;
}
.recipe__info {
vertical-align: top;
text-align: right;
padding: 0 1em 0 0;
margin: 0 1.3em 0 0;
font-weight: bold;
color: #454545;
border-right: 1px dotted #EEE;
width: 300px;
float: left;
}
.recipe__ingredients {
float: left;
}
.recipe-table {
position: relative;
padding: 1em;
border: 1px solid #DDD;
box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5);
z-index: 10;
}
.recipe-table__cell {
vertical-align: top;
padding: 3px 5px;
}
.recipe__text-field {
margin: 0;
padding: .45em 0.92em;
font-size: 1em;
line-height: 1.4;
color: #555555;
background-color: #FFF;
background-image: none;
border: 1px solid #CCC;
border-left: 1px solid #CCC;
}
.recipe-table__add-row {
margin-top: 0;
position: relative;
border-top: 1px solid #EEE;
z-index: 8;
}
.recipe-table__add-row-btn {
display: block;
cursor: pointer;
position: absolute;
right: 0;
left: 0;
width: 4em;
margin: 0 auto;
-webkit-transition: all .2s easy-in;
transition: all .2s easy-in;
text-align: center;
opacity: 0.5;
color: #fff;
border: 1px solid #16A085;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
background: #16A085;
height: 1.5em;
line-height: 1.5em;
}
.recipe-table__add-row-btn:hover {
opacity: 1;
}
.recipe-table__del-row-btn {
cursor: pointer;
display: inline-block;
padding: .45em 0.92em;
font-size: 1em;
line-height: 1.4;
border: 1px solid #F39C12;
color: #F39C12;
text-decoration: none;
transition: all .3s;
text-align: center;
background-color: #fff;
}
.recipe-table__del-row-btn:hover {
background: #F39C12;
color: #fff;
}
.drag-handler {
width: 1.4em;
position: relative;
background-color: #E4E6EB;
background-image: linear-gradient(45deg, #E4E6EB, #E4E6EB 2px, #fff 2px, #fff 4px, #E4E6EB 4px, #E4E6EB 9px, #fff 9px, #fff 11px, #E4E6EB 11px, #E4E6EB 16px, #fff 16px, #fff 18px, #E4E6EB 18px, #E4E6EB 22px);
background-size: 10px 20px;
cursor: move;
border-top: 2px solid #FFF;
border-bottom: 2px solid #FFF;
}
.drag-handler:active {
background-image: linear-gradient(45deg, #bab86c, #bab86c 2px, #fff 2px, #fff 4px, #bab86c 4px, #bab86c 9px, #fff 9px, #fff 11px, #bab86c 11px, #bab86c 16px, #fff 16px, #fff 18px, #bab86c 18px, #bab86c 22px);
background-size: 10px 20px;
}
JS:
$(document).ready(function() {
$(document).on('click', '.recipe-table__add-row-btn', function (e) {
var $el = $(e.currentTarget);
var $tableBody = $('#recipeTableBody');
var htmlString = $('#rowTemplate').html();
$tableBody.append(htmlString);
return false;
});
$(document).on('click', '.recipe-table__del-row-btn', function (e) {
var $el = $(e.currentTarget);
var $row = $el.closest('tr');
$row.remove();
return false;
});
Sortable.create(
$('#recipeTableBody')[0], {
animation: 150,
scroll: true,
handle: '.drag-handler',
onEnd: function() {
console.log('More see in https://github.com/RubaXa/Sortable');
}
}
);
});
Các vấn đề liên quan
- 1. Có thể có chức năng kéo và thả với AngularJS mà không dựa vào giao diện người dùng jQuery không?
- 2. Giao diện người dùng Jquery kết hợp có thể sắp xếp và có thể kéo
- 3. Sử dụng tính năng kéo/thả của giao diện người dùng jQuery với backbone.js
- 4. Giao diện người dùng jQuery Sắp xếp sự kiện dừng sau khi kéo và thả
- 5. Giao diện người dùng jQuery Kéo được, chụp vào lưới
- 6. Làm cho thao tác kéo và thả của giao diện người dùng Jquery được thu nhỏ khi thu nhỏ
- 7. Làm cho hàng của bảng hoạt động trở lên trong giao diện người dùng có thể sắp xếp
- 8. Giao diện người dùng Kendo và giao diện người dùng jQuery - kích thước và khung javascript
- 9. Kéo và thả hàng của bảng từ một bảng tab sang bảng tab khác - Jquery
- 10. Ngôn ngữ tốt nhất để tạo nhanh giao diện người dùng mà không cần kéo và thả?
- 11. Giao diện người dùng jQuery: Trình đặt ngày tháng đặt xuống thả xuống phạm vi năm thành 100 năm
- 12. Sử dụng tính năng kéo và thả của giao diện người dùng jQuery: thay đổi phần tử đã kéo khi thả
- 13. Giao diện người dùng JQuery - Nối thêm có thể kéo được vào Droppable
- 14. Tải lên + Giao diện người dùng jQuery
- 15. Giao diện người dùng jQuery không tải
- 16. Trình giữ chỗ có thể sắp xếp giao diện người dùng jQuery với hàng Bootstrap
- 17. CSS UI không có giao diện người dùng jQuery cdn
- 18. Xóa nhầm vùng thả xuống giao diện người dùng jQuery bên trong iframe cuộn
- 19. cách tạo giao diện người dùng có thể kéo trong UIView?
- 20. Giao diện người dùng jQuery: Kéo và sao chép từ div gốc, nhưng giữ bản sao
- 21. JS góc cho giao diện người dùng trò chơi
- 22. Giao diện người dùng jQuery cách đặt tùy chọn ngăn kéo có thể kéo trên phụ huynh của bố mẹ
- 23. cách hoàn nguyên vị trí của giao diện người dùng jquery có thể kéo được dựa trên điều kiện
- 24. Kéo và thả: jQuery UI hoặc Scriptaculous?
- 25. Trình duyệt javascript STOMP có hoạt động trong trình duyệt/giao diện người dùng js không?
- 26. Android Studio bị treo khi kéo/thả phần tử giao diện người dùng
- 27. Thư viện giao diện người dùng jQuery và hình ảnh
- 28. Giao diện người dùng JQuery có thể kéo được: Vượt quá ngăn chặn ở một bên
- 29. Giao diện người dùng JQuery Tabs caching
- 30. Giao diện người dùng JQuery Có thể kéo được - Cách biết phần tử có thể kéo được khởi tạo?
Cảm ơn! Tôi sẽ đưa nó cho sếp của tôi. – Bill
@YongkeBillYu, thử nghiệm đã kết thúc thành công? –
Có thực sự! Cảm ơn bạn. – Bill