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')
})
元記事を表示する