interact.jsのドラッグ&ドロップ サンプル2

<div class="drag">ドラッグ要素</div>
<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>

.drag {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 10px;
  background: skyblue;
  touch-action: none;
  user-select: none;
}

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

interact('.drag').draggable({
  listeners: {
    move(event) {
      pos.x += event.dx
      pos.y += event.dy
      event.target.style.transform =
        `translate(${pos.x}px, ${pos.y}px)`
    },
  },
  modifiers: [
    interact.modifiers.restrict({
      restriction: 'parent',
      endOnly: true
    })
  ],
})

元記事を表示する