interact.js 中文文档（拖动）

演示

拖动是 interact.js 提供的一个最简单的动作。让一个元素可拖动，您需要创建一个可交互对象（interactable）在你的目标元素上，然后调用 draggable 方法并填入您需要的配置。

<div class="draggable"> Draggable Element </div>

.draggable {
  touch-action: none;
  user-select: none;
}

const position = { x: 0, y: 0 }

interact('.draggable').draggable({
  listeners: {
    start (event) {
      console.log(event.type, event.target)
    },
    move (event) {
      position.x += event.dx
      position.y += event.dy

      event.target.style.transform =
        `translate(${position.x}px, ${position.y}px)`
    },
  }
})

除了常用的 交互事件 的属性， dragmove 事件还提供了

拖动事件属性	描述
dragEnter	对象被拖动时进入的的落入区（dropzone）
dragLeave	对象被拖动时离开的的落入区（dropzone）

记得要使用 CSS touch-action: none 来阻止浏览器平移（滚动）当用户通过触摸拖动的时候, 和 user-select: none 来禁用文本选择。

lockAxis 和 startAxis

// 锁住拖动时开始的方向
interact(singleAxisTarget).draggable({
  startAxis: 'xy'
  lockAxis: 'start'
});

// 启动拖动当拖动事件以水平方向开始
interact(horizontalTarget).draggable({
  startAxis: 'x'
  lockAxis: 'x'
});

一共有两个选项可以来控制拖动时候的方向轴：startAxis and lockAxis.

startAxis 设置移动方向为最开始时候的移动方向。使用 'x' 来开始水平拖动，使用 'y' 来设置开始竖直拖动。

lockAxis 来锁定拖动事件的方向。如果使用 'start' ，则拖动会被锁定为最开始移动的方向。