js实现 拖动
实现拖动的核心步骤
监听鼠标事件
在可拖动元素上添加mousedown事件监听器，记录初始位置和鼠标位置。
element.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX - element.offsetLeft;
startY = e.clientY - element.offsetTop;
});处理鼠标移动
在文档上添加mousemove事件，计算元素新位置并更新样式。
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
element.style.left = `${e.clientX - startX}px`;
element.style.top = `${e.clientY - startY}px`;
});结束拖动
通过mouseup事件清除拖动状态。
document.addEventListener('mouseup', () => {
isDragging = false;
});完整实现示例
const draggableElement = document.getElementById('draggable');
let isDragging = false;
let startX, startY;
draggableElement.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX - draggableElement.offsetLeft;
startY = e.clientY - draggableElement.offsetTop;
draggableElement.style.cursor = 'grabbing';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
draggableElement.style.left = `${e.clientX - startX}px`;
draggableElement.style.top = `${e.clientY - startY}px`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
draggableElement.style.cursor = 'grab';
});注意事项
CSS准备
确保元素具有position: absolute或position: fixed样式，并设置初始定位。
#draggable {
position: absolute;
cursor: grab;
user-select: none;
}性能优化
对于频繁触发的mousemove事件，可以考虑使用防抖或节流技术。
触摸屏支持
需要额外添加touchstart、touchmove和touchend事件处理程序以实现移动端兼容。
边界限制 可以通过添加位置判断逻辑来限制元素移动范围，防止拖出可视区域。
