当前位置：首页 > JavaScript

js实现长按拖动

2026-03-15 16:50:47JavaScript

实现长按拖动的核心逻辑

长按拖动需要结合mousedown、mousemove和mouseup事件，并添加定时器判断长按操作。以下是具体实现方法：

监听长按事件

使用setTimeout在mousedown时启动计时器，达到设定时间后触发拖动逻辑。若在时间内触发mouseup则清除计时器。

let pressTimer;
const longPressDelay = 500; // 长按判定时间(毫秒)

element.addEventListener('mousedown', (e) => {
  pressTimer = setTimeout(() => {
    startDrag(e); // 长按时间到达后执行拖动
  }, longPressDelay);
});

element.addEventListener('mouseup', () => {
  clearTimeout(pressTimer); // 取消长按判定
});

实现拖动功能

记录初始位置并计算偏移量，通过CSS变换实现元素跟随鼠标移动。

let isDragging = false;
let initialX, initialY;

function startDrag(e) {
  isDragging = true;
  initialX = e.clientX - element.getBoundingClientRect().left;
  initialY = e.clientY - element.getBoundingClientRect().top;

  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', stopDrag);
}

function drag(e) {
  if (!isDragging) return;
  element.style.left = `${e.clientX - initialX}px`;
  element.style.top = `${e.clientY - initialY}px`;
}

function stopDrag() {
  isDragging = false;
  document.removeEventListener('mousemove', drag);
}

防止文本选中和默认行为

长按操作可能触发文本选择或默认菜单，需要阻止这些行为。

element.addEventListener('mousedown', (e) => {
  e.preventDefault(); // 阻止默认行为
});

// CSS防止文本选中
.draggable {
  user-select: none;
  -webkit-user-select: none;
}

完整示例代码

<style>
  .box {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    user-select: none;
  }
</style>

<div class="box" id="draggable"></div>

<script>
  const element = document.getElementById('draggable');
  let pressTimer, isDragging = false;
  let initialX, initialY;
  const longPressDelay = 500;

  element.addEventListener('mousedown', (e) => {
    e.preventDefault();
    pressTimer = setTimeout(() => {
      startDrag(e);
    }, longPressDelay);
  });

  element.addEventListener('mouseup', () => {
    clearTimeout(pressTimer);
  });

  function startDrag(e) {
    isDragging = true;
    initialX = e.clientX - element.getBoundingClientRect().left;
    initialY = e.clientY - element.getBoundingClientRect().top;

    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', stopDrag);
  }

  function drag(e) {
    if (!isDragging) return;
    element.style.left = `${e.clientX - initialX}px`;
    element.style.top = `${e.clientY - initialY}px`;
  }

  function stopDrag() {
    isDragging = false;
    document.removeEventListener('mousemove', drag);
  }
</script>

触摸屏设备适配

对于移动设备，需要处理touchstart、touchmove和touchend事件。

element.addEventListener('touchstart', (e) => {
  e.preventDefault();
  pressTimer = setTimeout(() => {
    startDrag(e.touches[0]);
  }, longPressDelay);
});

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

// 修改drag函数处理触摸事件
function drag(e) {
  if (!isDragging) return;
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  element.style.left = `${clientX - initialX}px`;
  element.style.top = `${clientY - initialY}px`;
}

性能优化建议

使用transform代替top/left属性可获得更好的性能：

js实现长按拖动

function drag(e) {
  if (!isDragging) return;
  const x = (e.clientX || e.touches[0].clientX) - initialX;
  const y = (e.clientY || e.touches[0].clientY) - initialY;
  element.style.transform = `translate(${x}px, ${y}px)`;
}