SOURCE

const dragBox = document.querySelector('.drag');
let layerX = 0;
let layerY = 0;
let dragged = '';
document.addEventListener('dragstart', (e) => {
    dragged = e.target;
    e.target.style.opacity = 0.5
})
document.addEventListener('dragend', (e) => {
    e.target.style.opacity = 1;
})
document.addEventListener('mousedown', (e) => {
    layerX = e.offsetX;
    layerY = e.offsetY;
})

document.addEventListener('dragover', function (event) {
    // 防止拖拉效果被重置，允许被拖拉的节点放入目标节点
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';

}, false);
document.addEventListener('dragenter', e => {
    console.log(e.target.className == 'dropzone')
    if (e.target.className == 'dropzone') {
        e.target.style.backgroundColor = 'pink'
    }
})
document.addEventListener('dragleave', e => {
    if (e.target.className == 'dropzone') {
        e.target.style.background = ''
    }
})

document.addEventListener('drop', function (event) {
    // 防止事件默认行为（比如某些元素节点上可以打开链接），
    event.preventDefault();

    if (event.target.className === 'dropzone') {
        // 恢复目标节点背景色
        event.target.style.background = '';
        // 将被拖拉节点插入目标节点
        dragged.parentNode.removeChild(dragged);
        event.target.appendChild(dragged);
    }
}, false);

<div class="dropzone">

<div class="drag" draggable="true"></div>
</div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
 

.drag{
    width: 100px;
    height: 100px;
    background-color: red;
}

.dropzone{
    width: 150px;
    height: 150px;
    border: 2px solid #000;
    margin-bottom: 20px;
}