DragEvent

by LUPIN34

HTML

<div id='outer'>
  <div id='drag' draggable='true'></div>
  <br>
  <div id='drop'></div>
</div>

CSS

#drag {
            display: inline-block;
            background: #000;
            width: 100px;
            height: 100px;
        }
        
        #drop {
            display: block;
            background: rebeccapurple;
            width: 200px;
            height: 200px;
        }

JavaScript

let drag = document.getElementById('drag');
    drag.addEventListener('dragstart', (event) => {
        console.log('dragstart')
    })
    drag.addEventListener('drag', (event) => {
        console.log('drag')
    })
    drag.addEventListener('dragend', (event) => {
        console.log('dragend')
    })

    let drop = document.getElementById('drop');
    drop.addEventListener('dragenter', (event) => {
        console.log('dragenter')
        event.preventDefault();
    })
    drop.addEventListener('dragover', (event) => {
        console.log('dragover')
        event.preventDefault();
    })
    drop.addEventListener('dragleave', (event) => {
        console.log('dragleave')
    })
    drop.addEventListener('drop', (event) => {
        console.log('drop')
        event.preventDefault();
        event.target.appendChild(document.getElementById('drag'));
    })