js 实现 拖动

实现拖动的核心方法

使用HTML5的拖放API实现拖动功能。主要涉及draggable属性、dragstart、dragover和drop事件。

// 设置元素为可拖动
document.getElementById('dragItem').draggable = true;

// 拖动开始时存储数据
document.getElementById('dragItem').addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
});

// 阻止默认行为以允许放置
document.getElementById('dropZone').addEventListener('dragover', function(e) {
    e.preventDefault();
});

// 处理放置操作
document.getElementById('dropZone').addEventListener('drop', function(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    e.target.appendChild(document.getElementById(data));
});

使用鼠标事件实现拖动

通过监听mousedown、mousemove和mouseup事件实现更精细的控制。

let isDragging = false;
let offsetX, offsetY;

document.getElementById('dragItem').addEventListener('mousedown', function(e) {
    isDragging = true;
    offsetX = e.clientX - e.target.getBoundingClientRect().left;
    offsetY = e.clientY - e.target.getBoundingClientRect().top;
    e.target.style.position = 'absolute';
});

document.addEventListener('mousemove', function(e) {
    if (!isDragging) return;
    const dragItem = document.getElementById('dragItem');
    dragItem.style.left = (e.clientX - offsetX) + 'px';
    dragItem.style.top = (e.clientY - offsetY) + 'px';
});

document.addEventListener('mouseup', function() {
    isDragging = false;
});

使用第三方库简化实现

使用如interact.js等库可以更便捷地实现复杂拖动交互。

interact('.drag-item')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,
    listeners: {
      move: dragMoveListener
    }
  });

function dragMoveListener(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);
}

拖动限制与边界控制

为拖动元素添加边界限制，防止拖出可视区域。

document.addEventListener('mousemove', function(e) {
    if (!isDragging) return;
    const dragItem = document.getElementById('dragItem');
    const parentRect = dragItem.parentNode.getBoundingClientRect();
    const itemRect = dragItem.getBoundingClientRect();

    let newX = e.clientX - offsetX;
    let newY = e.clientY - offsetY;

    // 限制在父元素内
    newX = Math.max(parentRect.left, Math.min(newX, parentRect.right - itemRect.width));
    newY = Math.max(parentRect.top, Math.min(newY, parentRect.bottom - itemRect.height));

    dragItem.style.left = (newX - parentRect.left) + 'px';
    dragItem.style.top = (newY - parentRect.top) + 'px';
});

触摸设备支持

添加触摸事件处理以实现移动端兼容。

let touchOffsetX, touchOffsetY;

document.getElementById('dragItem').addEventListener('touchstart', function(e) {
    const touch = e.touches[0];
    const rect = e.target.getBoundingClientRect();
    touchOffsetX = touch.clientX - rect.left;
    touchOffsetY = touch.clientY - rect.top;
    e.target.style.position = 'absolute';
});

document.addEventListener('touchmove', function(e) {
    const touch = e.touches[0];
    const dragItem = document.getElementById('dragItem');
    dragItem.style.left = (touch.clientX - touchOffsetX) + 'px';
    dragItem.style.top = (touch.clientY - touchOffsetY) + 'px';
    e.preventDefault();
});