Как сделать dragndrop элемента на заднем плане?

Реализован dragndrop на JS с перемещением объектов в корзину после того, как объект оказывается в корзине. Корзине задан больший zIndex и элемент уходит на второй план, чтобы его было видно сквозь решётку корзины (для эффекта якобы он внутри), но после этого он уже становится недоступен.

Как сделать так, чтобы можно было вытаскивать объекты обратно?

Код:

let item = document.querySelector('.item')
let currentDroppable = null;

item.onmousedown = function (event) {

    let shiftX = event.clientX - item.getBoundingClientRect().left;
    let shiftY = event.clientY - item.getBoundingClientRect().top;

    item.style.position = 'absolute';
    item.style.zIndex = 10;
    document.body.append(item);

    moveAt(event.pageX, event.pageY);

    function moveAt(pageX, pageY) {
        item.style.left = pageX - shiftX + 'px';
        item.style.top = pageY - shiftY + 'px';
    }

    function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);

        item.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        item.hidden = false;

        if (!elemBelow) return;

        let droppableBelow = elemBelow.closest('.cart');

        if (currentDroppable != droppableBelow) {
            if (currentDroppable) {
                leaveDroppable(currentDroppable);
            }
            currentDroppable = droppableBelow;
            if (currentDroppable) {
                enterDroppable(currentDroppable);
            }
        }
    }

    document.addEventListener('mousemove', onMouseMove);

    item.onmouseup = function () {
        document.removeEventListener('mousemove', onMouseMove);
        item.onmouseup = null;
    };

};

item.ondragstart = function () {
    return false;
};