有个需求,需要对html的div元素,实现拖拽排序的功能。请提供代码;
<!DOCTYPE html>
<html>
<head>
<title>Div Drag and Drop Sort Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style type="text/css">
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
height: 300px;
padding: 10px;
border: 2px solid black;
margin: auto;
}
.item {
width: 100px;
height: 100px;
background-color: #9c27b0;
color: white;
text-align: center;
line-height: 100px;
font-size: 24px;
margin-bottom: 10px;
cursor: move;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".item").draggable({
revert: "invalid",
cursor: "move",
helper: "clone"
});
$(".container").droppable({
drop: function(event, ui) {
if (ui.draggable.parent()[0] !== this) {
var item = ui.draggable.clone();
ui.draggable.remove();
item.appendTo(this);
}
}
});
});
</script>
</body>
</html>