实现拖拽功能的方法有很多，这里提供一种基于原生 JavaScript 的实现。我们将创建一个可拖拽的元素，通过事件监听器实现拖拽行为，并在拖拽过程中更新元素位置。
创建一个可拖拽的元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽示例</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: red;
cursor: move;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="draggable"></div>
<script>
// 获取可拖拽元素
const draggable = document.getElementById('draggable');
// 定义一个对象，存储元素在鼠标移动时的位置
let currentPosition = {
x: 0,
y: 0
};
// 定义一个函数，用于更新元素位置
function updatePosition(event) {
draggable.style.left = `${event.clientX - currentPosition.x}px`;
draggable.style.top = `${event.clientY - currentPosition.y}px`;
}
// 为元素添加鼠标按下、移动和松开事件监听器
draggable.addEventListener('mousedown', (event) => {
currentPosition = {
x: event.clientX,
y: event.clientY
};
document.addEventListener('mousemove', updatePosition);
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', updatePosition);
});
});
</script>
</body>
</html>
这个示例会在鼠标按下时，启动拖拽功能。当鼠标移动时，元素位置会根据鼠标移动距离进行更新。当鼠标松开时，拖拽行为将停止。
完整代码如下图：
