当前位置：首页 > HTML

h5实现拖动

2026-03-06 14:38:35HTML

实现拖动的H5方法

使用HTML5原生拖放API

HTML5提供了原生的拖放API，通过draggable属性、dragstart、dragend、dragover和drop等事件实现元素拖动。

h5实现拖动

<div id="dragElement" draggable="true">拖动我</div>
<div id="dropArea">放置区域</div>

<script>
  const dragElement = document.getElementById('dragElement');
  const dropArea = document.getElementById('dropArea');

  dragElement.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', e.target.id);
  });

  dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

  dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(data);
    e.target.appendChild(draggedElement);
  });
</script>

使用Touch事件实现移动端拖动

移动端不支持原生拖放API，可以通过Touch事件模拟拖动效果。

h5实现拖动

<div id="touchElement" style="width: 100px; height: 100px; background: red;"></div>

<script>
  const touchElement = document.getElementById('touchElement');
  let startX, startY, initialX, initialY;

  touchElement.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
    initialX = touchElement.offsetLeft;
    initialY = touchElement.offsetTop;
  });

  touchElement.addEventListener('touchmove', (e) => {
    e.preventDefault();
    const currentX = e.touches[0].clientX;
    const currentY = e.touches[0].clientY;
    const diffX = currentX - startX;
    const diffY = currentY - startY;
    touchElement.style.left = `${initialX + diffX}px`;
    touchElement.style.top = `${initialY + diffY}px`;
  });
</script>

使用第三方库实现高级拖动

对于更复杂的拖动需求，可以使用第三方库如interact.js或Draggable.js。

<div id="interactElement" style="width: 100px; height: 100px; background: blue;"></div>
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script>
  interact('#interactElement').draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,
    onmove: (event) => {
      const target = event.target;
      const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
      target.style.transform = `translate(${x}px, ${y}px)`;
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }
  });
</script>

CSS优化拖动体验

为拖动元素添加CSS样式，提升用户体验。

#dragElement, #touchElement, #interactElement {
  cursor: grab;
  user-select: none;
  position: absolute;
}

#dragElement:active, #touchElement:active, #interactElement:active {
  cursor: grabbing;
}

#dropArea {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  margin-top: 20px;
}