首先，你必须克隆可拖动的元素。然后，在drop事件中，你必须追加你的元素。在使用dragover的情况下，当你添加一个元素时，你必须在dragleave事件中删除它。

"use strict"
let currentWidget;
function dragAndDropInitilize() {

    var draggables = document.querySelectorAll("div[draggable='true'");
    var dragzones = document.querySelectorAll(".dragablezone");

    draggables.forEach(draggable => {
        draggable.addEventListener('dragstart', () => {
            var clone = draggable.cloneNode(true);
            clone.classList.add("dragging");
            currentWidget = clone;
        });

        draggable.addEventListener('dragend', () => {

            draggable.classList.remove('dragging');
        });
    });

    dragzones.forEach(zone => {
        zone.addEventListener('dragover', e => {
            e.preventDefault();
            const nextElement = getNextelement(zone, e.y);
            if (nextElement == null) {
                zone.appendChild(currentWidget);
            }
            else {
                zone.insertBefore(currentWidget, nextElement);
            }

        });
        zone.addEventListener('dragenter', () => {
            zone.classList.add('dragover');
        });
        zone.addEventListener('dragleave', () => {
            zone.classList.remove('dragover');
            zone.removeChild(currentWidget);
        });
        zone.addEventListener('drop', e => {
            e.target.classList.remove('dragover');
            currentWidget.classList.remove('dragging');

            const nextElement = getNextelement(zone, e.clientY);
            if (nextElement == null) {
                zone.appendChild(currentWidget);
            }
            else {
                zone.insertBefore(currentWidget, nextElement);
            }

        });

    });
}

function getNextelement(zone, y) {
    var widgets = [...zone.querySelectorAll('.widget:not(.dragging)')];
    return widgets.reduce((closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;

        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child };
        }
        else {
            return closest;
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element;

}

它不会工作，因为这个函数：

function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]

    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect()
        const offset = y - box.top - box.height / 2
        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child }
        } else {
            return closest
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element
}

试试别。