ドラッグ&ドロップのdataTransfer.effectAllowedとev.dataTransfer.dropEffectについて
effectAllowedで設定した値がdropEffectで設定した値と噛み合うときにのみdropイベントが発生します。
以下の例ではdragstart時にeffectAllowedにmoveを指定しています。
そして、dragover時にdropEffectにmoveを指定しています。
この場合はdropイベントが発生します。
<div id="wrap">
<div id="AAA" class="draggable" draggable="true">ドラッグされる要素</div>
<div class="droppable">ドロップされる範囲</div>
</div> .draggable{
background: deeppink;
color: white;
margin: 5px 0;
cursor: move;
}
.droppable {
border: solid 1px lightcoral;
height: 200px;
}const addDraggableHandler = elms => {
elms.forEach(elm => {
elm.addEventListener('dragstart', handleDragStart)
})
}
const addDroppableHandler = elms => {
elms.forEach(elm => {
elm.addEventListener('dragover', handleDragOver)
elm.addEventListener('drop', handleDrop)
})
}
const handleDragStart = ev => {
ev.dataTransfer.setData('text/plain', ev.target.id)
ev.dataTransfer.effectAllowed = 'move' // moveを指定
}
const handleDragOver = ev => {
ev.preventDefault()
ev.dataTransfer.dropEffect = 'move' // ここをcopyにするとdropイベントは発生しない
}
const handleDrop = ev => {
ev.preventDefault()
const draggedElm = document.getElementById(ev.dataTransfer.getData('text/plain'))
ev.target.append(draggedElm)
ev.dataTransfer.clearData()
}
addDraggableHandler(document.querySelectorAll('.draggable'))
addDroppableHandler(document.querySelectorAll('.droppable'))しかし、dropEffect = 'copy’ とすると drop イベントが発生しないので、要素をdropできなくなります。