没拖拽之前
<!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>
<style>
.wrapper {
width: 375px;
border: 1px solid;
margin: 0 auto;
min-height: 500px;
border-radius: 10px;
padding: 20px;
background-color: #28263b;
color: #fff;
position: relative;
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
.box img {
width: 45px;
height: 45px;
padding: 10px 20px;
}
.fix {
padding: 0 20px;
width: 45px;
height: 0;
}
.my {
min-height: 150px;
position: relative;
}
.pop {
width: 150px;
height: 30px;
background-color: #fff;
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
line-height: 30px;
padding: 10px 20px;
border-radius: 5px;
display: none;
color: #000;
}
</style>
</head>
<body>
<div class="wrapper">
<p>最近使用的小程序</p>
<div class="box last">
<img
draggable="true"
src="./imgs/下箭头.png"
alt=""
/>
<img
draggable="true"
src="./imgs/错误.png"
alt=""
/>
<img
draggable="true"
src="./imgs/修改.png"
alt=""
/>
<span class="fix"></span>
<span class="fix"></span>
<span class="fix"></span>
</div>
<p>我的小程序</p>
<div class="box my">
<span class="fix"></span>
<span class="fix"></span>
<span class="fix"></span>
<div class="pop">松手把图标放在这里</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js "></script>
<script>
// 已经拖动的元素下标
var finishList = [];
// 当前拖动的下标
var currIndex;
// 开始拖动
$(".last>img").on("dragstart", function (event) {
currIndex = $(this).index() + 1;
console.log(currIndex)
});
// 放下元素
$(".my").on("drop", function (event) {
// 判断是否已经放进去了
if (!finishList.includes(currIndex)) {
finishList.push(currIndex);
var $clone = $(`.last img:nth-child(${currIndex})`).clone();
$(this).prepend($clone);
console.log(finishList)
}
});
// 进入元素范围, 阻止默认事件(必须)
$(".my").on("dragover", function (event) {
event.preventDefault();
});
// 进入元素
$(".my").on("dragenter", function (event) {
if (finishList.includes(currIndex)) {
$(".pop").text("目标已存在");
} else {
$(".pop").text("松手把图标放在这里");
}
$(".my").css("background", "rgba(0,0,0,.5)");
$(".pop").css("display", "block");
});
// 拖动结束
$(document).on("dragend", function () {
$(".my").css("background", "");
$(".pop").css("display", "none");
});
</script>
</body>
</html>
拖拽之后
也可以查看其他的例子,便于理解
菜鸟教程在线编辑器https://www.runoob.com/try/try.php?filename=tryjsref_ondrop