介绍元素拖放的方法。
1.要拖动的元素添加属性draggable="true"后，就能够拖动，但是松开鼠标后元素还是在原来的位置
2.监听元素的拖放事件，在事件结束的时候改变元素的位置
3.元素设置为绝对定位，根据拖动过程中鼠标位置在水平和垂直方向的变化量重新设置元素的定位置
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
height: 600px;
margin: 30px;
border: 3px solid #e9e9e9;
position: relative;
}
#img {
50px;
position: absolute;
left: 10px;
top: 15px;
}
</style>
</head>
<body>
<div class="container">
<img
id="img"
draggable="true"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0709%2F497d79c8j00qvytx4001uc000hs00qog.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646233926&t=5ea770e1b1e00c1adafa63d824f3dd69"
alt=""
/>
</div>
</body>
<script>
let img = document.querySelector("#img");
let mousePageX, mousePageY, imgX, imgY;
// 拖放开始
img.ondragstart = (e) => {
// 记录元素的初始位置
imgX = parseInt(getComputedStyle(img).left);
imgY = parseInt(getComputedStyle(img).top);
// 记录鼠标的初始位置
mousePageX = e.pageX;
mousePageY = e.pageY;
};
// 拖放结束
img.ondragend = (e) => {
// 鼠标位置在水平方向和垂直方向的变化量，再加上元素的初始位置
img.style.left = e.pageX - mousePageX + imgX + "px";
img.style.top = e.pageY - mousePageY + imgY + "px";
};
</script>
</html>