当前位置：首页 > JavaScript

js实现长按拖动

2026-02-02 16:33:59JavaScript

实现长按拖动的步骤

监听触摸事件

使用 touchstart、touchmove 和 touchend 事件来跟踪触摸操作。长按可以通过 setTimeout 实现，在触摸开始时设置定时器，若在指定时间内未释放则触发拖动。

let timer;
let isDragging = false;

element.addEventListener('touchstart', (e) => {
    timer = setTimeout(() => {
        isDragging = true;
        // 初始化拖动位置
    }, 500); // 长按时间阈值
});

element.addEventListener('touchend', () => {
    clearTimeout(timer);
    if (!isDragging) return;
    // 结束拖动逻辑
    isDragging = false;
});

element.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    e.preventDefault();
    // 更新元素位置
});

计算拖动位置

在 touchmove 事件中，通过 e.touches[0].clientX 和 e.touches[0].clientY 获取当前触摸点坐标，并更新元素位置。

let startX, startY;

element.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

element.addEventListener('touchmove', (e) => {
    const deltaX = e.touches[0].clientX - startX;
    const deltaY = e.touches[0].clientY - startY;
    element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});

防止误触

在 touchstart 中清除之前的定时器，避免多次触发长按逻辑。在 touchend 中重置状态。

element.addEventListener('touchstart', () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
        isDragging = true;
    }, 500);
});

element.addEventListener('touchend', () => {
    clearTimeout(timer);
    if (isDragging) {
        isDragging = false;
    }
});

完整示例

以下是一个完整的长按拖动实现示例：

const element = document.getElementById('drag-element');
let timer;
let isDragging = false;
let startX, startY;

element.addEventListener('touchstart', (e) => {
    e.preventDefault();
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
    timer = setTimeout(() => {
        isDragging = true;
        element.style.cursor = 'grabbing';
    }, 500);
});

element.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    e.preventDefault();
    const deltaX = e.touches[0].clientX - startX;
    const deltaY = e.touches[0].clientY - startY;
    element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});

element.addEventListener('touchend', () => {
    clearTimeout(timer);
    if (isDragging) {
        element.style.cursor = 'grab';
        isDragging = false;
    }
});

兼容鼠标事件

如果需要支持鼠标拖动，可以添加 mousedown、mousemove 和 mouseup 事件，逻辑与触摸事件类似。

element.addEventListener('mousedown', (e) => {
    e.preventDefault();
    startX = e.clientX;
    startY = e.clientY;
    timer = setTimeout(() => {
        isDragging = true;
        element.style.cursor = 'grabbing';
    }, 500);
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    e.preventDefault();
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;
    element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});

document.addEventListener('mouseup', () => {
    clearTimeout(timer);
    if (isDragging) {
        element.style.cursor = 'grab';
        isDragging = false;
    }
});

通过以上方法，可以实现长按拖动功能，并兼容触摸和鼠标操作。

js实现长按拖动