// HTML部分
<div id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute;">
Drag me!
</div>
// JavaScript部分
document.addEventListener('DOMContentLoaded', function () {
let isDragging = false;
let offsetX, offsetY;
const draggableElement = document.getElementById('draggable');
// 鼠标按下事件
draggableElement.addEventListener('mousedown', function (e) {
isDragging = true;
offsetX = e.clientX - draggableElement.offsetLeft;
offsetY = e.clientY - draggableElement.offsetTop;
});
// 鼠标移动事件
document.addEventListener('mousemove', function (e) {
if (isDragging) {
const x = e.clientX - offsetX;
const y = e.clientY - offsetY;
draggableElement.style.left = `${x}px`;
draggableElement.style.top = `${y}px`;
}
});
// 鼠标释放事件
document.addEventListener('mouseup', function () {
isDragging = false;
});
});
div
元素,设置了宽度、高度、背景颜色,并将其定位为绝对位置(position: absolute
),以便可以通过修改其 left
和 top
样式属性来改变其位置。DOMContentLoaded
事件,确保 DOM 完全加载后再执行代码。mousedown
、mousemove
和 mouseup
事件监听器来实现拖拽功能。mousedown
),记录当前鼠标位置与元素左上角的偏移量 (offsetX
, offsetY
),并设置 isDragging
为 true
。mousemove
) 时,如果 isDragging
为 true
,则根据鼠标的当前位置更新元素的位置。mouseup
) 时,将 isDragging
设置为 false
,停止拖拽。上一篇:js 获取dom高度
下一篇:nodejs webpack
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站