實現拖拽功能的方法有很多，這裏提供壹種基於原生 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>
這個示例會在鼠標按下時，啟動拖拽功能。當鼠標移動時，元素位置會根據鼠標移動距離進行更新。當鼠標松開時，拖拽行為將停止。
完整代碼如下圖：