js实现长按拖动
实现长按拖动的 JavaScript 方法
监听长按事件
通过 setTimeout 实现长按判断，当鼠标或触摸按住超过设定时间（如 500ms）时触发拖动逻辑。监听 mousedown 或 touchstart 事件，记录初始位置。
let pressTimer;
const element = document.getElementById('draggable');
element.addEventListener('mousedown', (e) => {
pressTimer = setTimeout(() => {
startDrag(e);
}, 500); // 长按时间阈值
});
element.addEventListener('mouseup', () => {
clearTimeout(pressTimer);
});初始化拖动状态
在 startDrag 函数中记录初始坐标和元素位置，绑定移动和结束事件的监听器。
function startDrag(e) {
const rect = element.getBoundingClientRect();
const offsetX = e.clientX - rect.left;
const offsetY = e.clientY - rect.top;
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
function drag(e) {
element.style.left = `${e.clientX - offsetX}px`;
element.style.top = `${e.clientY - offsetY}px`;
}
function endDrag() {
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', endDrag);
}
}处理触摸事件
适配移动端触摸操作，监听 touchstart、touchmove 和 touchend 事件，注意阻止默认行为避免页面滚动。
element.addEventListener('touchstart', (e) => {
pressTimer = setTimeout(() => {
startTouchDrag(e);
}, 500);
});
element.addEventListener('touchend', () => {
clearTimeout(pressTimer);
});
function startTouchDrag(e) {
const touch = e.touches[0];
const rect = element.getBoundingClientRect();
const offsetX = touch.clientX - rect.left;
const offsetY = touch.clientY - rect.top;
document.addEventListener('touchmove', touchDrag);
document.addEventListener('touchend', endTouchDrag);
function touchDrag(e) {
e.preventDefault();
const touch = e.touches[0];
element.style.left = `${touch.clientX - offsetX}px`;
element.style.top = `${touch.clientY - offsetY}px`;
}
function endTouchDrag() {
document.removeEventListener('touchmove', touchDrag);
document.removeEventListener('touchend', endTouchDrag);
}
}CSS 样式要求
确保元素使用 position: absolute 或 position: fixed，并通过 left 和 top 控制位置。
#draggable {
position: absolute;
cursor: grab;
user-select: none; /* 防止拖动时选中文本 */
}优化与注意事项
- 性能优化：使用
transform替代left/top减少重排。 - 防误触：在移动端增加
touch-action: none避免与浏览器手势冲突。 - 兼容性：检查
Passive Event Listeners是否需要用于touchmove。
通过以上方法，可以实现跨端的长按拖动功能，同时兼顾性能和交互体验。
