js实现图片的拖动
实现图片拖动的核心步骤
监听鼠标事件
为图片元素添加mousedown、mousemove和mouseup事件监听器。mousedown触发时记录初始位置，mousemove时计算偏移量并更新图片位置，mouseup时移除移动监听。
const img = document.getElementById('draggable-img');
let isDragging = false;
let offsetX, offsetY;
img.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - img.getBoundingClientRect().left;
offsetY = e.clientY - img.getBoundingClientRect().top;
img.style.cursor = 'grabbing';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
img.style.left = `${e.clientX - offsetX}px`;
img.style.top = `${e.clientY - offsetY}px`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
img.style.cursor = 'grab';
});CSS准备工作
确保图片的position属性设置为absolute或fixed，否则定位属性（left/top）不会生效。初始样式需包含cursor: grab提升交互体验。
#draggable-img {
position: absolute;
cursor: grab;
user-select: none; /* 防止拖动时选中文本 */
}进阶功能实现
边界限制
防止图片被拖出视口范围，在mousemove事件中增加边界检查逻辑：
const maxX = window.innerWidth - img.width;
const maxY = window.innerHeight - img.height;
img.style.left = `${Math.max(0, Math.min(e.clientX - offsetX, maxX))}px`;
img.style.top = `${Math.max(0, Math.min(e.clientY - offsetY, maxY))}px`;触摸屏支持
通过监听touchstart、touchmove和touchend事件实现移动端兼容：
img.addEventListener('touchstart', (e) => {
const touch = e.touches[0];
offsetX = touch.clientX - img.getBoundingClientRect().left;
offsetY = touch.clientY - img.getBoundingClientRect().top;
});
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
img.style.left = `${touch.clientX - offsetX}px`;
img.style.top = `${touch.clientY - offsetY}px`;
});性能优化建议
事件委托优化
对于大量可拖动元素，建议使用事件委托减少监听器数量，通过e.target判断触发元素。
节流处理
高频触发的mousemove事件可使用requestAnimationFrame进行节流：
let requestId;
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
cancelAnimationFrame(requestId);
requestId = requestAnimationFrame(() => {
img.style.left = `${e.clientX - offsetX}px`;
img.style.top = `${e.clientY - offsetY}px`;
});
});z-index管理
拖动时临时提高元素的z-index，确保其显示在最上层，结束拖动后恢复原值。
