SOURCE

const dragDom = document.querySelector('.drag-dom');
const dropDom = document.querySelector('.drop');

function dragstart(event) {
    console.log('dragstart')
    const div = document.createElement('div');
    document.body.appendChild(div);
}
function dragover(event) {
    event.preventDefault();
    // console.log('dragover')
}

function drop(event) {
    event.preventDefault();
    console.log('drop');
}

function dragenter(event) {
    event.preventDefault();
    console.log('dragenter')
}

function dragend(event) {
    console.log('dragend');
}

document.addEventListener('dragstart', dragstart)
document.addEventListener('dragover', dragover)
document.addEventListener('dragenter', dragenter)
dropDom.addEventListener('drop', drop)
document.addEventListener('dragend', dragend)

<div>
    <div class="drag">
        <div class="drag-dom" draggable="true"></div>
    </div>
    <div class="drop">

    </div>
</div>

.drag, .drop {
    height: 100px;
    border: 1px solid red;
    margin: 10px;
}

.drag-dom {
    border: 1px solid green;
    height: 50px;
    width: 50px;
}