拖动代码，效果棒棒的，如果是表格，直接换上tr就可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://www.aarpress.com/static/index/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<style>
.box {
width: 500px;
display: flex;
flex-wrap: wrap;
}
.box .item {
background: #eee;
width: 500px;
text-align: center;
padding: 10px;
margin: 20px 0;
}
</style>
<div class="box">
<div class="item" id="1">1</div>
<div class="item" id="2">2</div>
<div class="item" id="3">3</div>
<div class="item" id="4">4</div>
<div class="item" id="5">5</div>
</div>
<script>
$(function () {
$(".item").attr("draggable", true); // 为对象添加可拖拽属性
console.log($("tbody tr"))
// 拖动对象
$(".item").bind("dragstart", function (event) { //dragstart 拖动时触发
var originalEvent = event.originalEvent;
originalEvent.dataTransfer.setData("srcDomId", originalEvent.target.id);
$(this).addClass("dragClass");
}).bind("dragend", function (event) { //dragend 户完成元素拖动后触发
var originalEvent = event.originalEvent;
$(this).removeClass("dragClass");
});
// 拖动时经过对象
$(".item").bind("dragover", function (event) {
if ($(this).is("tr")) {
console.log($(this).attr("id"));
$(this).addClass("overClass");
}
event.preventDefault(); // dragover 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
});
//拖动时经过对象
$(".item").bind("dragleave", function (event) { //
$(this).removeClass("overClass");
event.preventDefault();
});
// 放置区域对象
$(".item").bind("drop", function (event) {
var originalEvent = event.originalEvent;
var srcDomId = originalEvent.dataTransfer.getData("srcDomId");
$(this).removeClass("overClass");
if ($(this).attr("id") != srcDomId) {
$(this).before($("#" + srcDomId).detach());
}
event.preventDefault();
});
});
</script>
</body>
</html>
