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

ドラッグ要素

ドロップ範囲
<div class="drag" data-interact>ドラッグ要素</div>
<hr>
<div class="drop" data-interact>ドロップ範囲</div>
.drag,
.drop {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 10px;
  touch-action: none;
  user-select: none;
}

.drag {
  background: skyblue;
}

.drop {
  background: palegreen;
}

.drag.active {
  background: navy;
  color: white;
}
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
    })
  ],
})

interact('.drop').dropzone({
  ondrop(event) {
    const relatedTarget = event.relatedTarget
    const target = event.target
    const dragData = relatedTarget.dataset.interact
    const dropData = target.dataset.interact
    if (dragData === dropData) {
      relatedTarget.textContent = 'ドロップ完了'
      target.style.backgroundColor = 'orange'
    }
  }
}).on('dropactivate', (event) => {
  event.relatedTarget.classList.add('active')
}).on('dropdeactivate', (event) => {
  event.relatedTarget.classList.remove('active')
})

元記事を表示する