Javascript 不使用flexbox和Dragable通过z索引堆叠对象

我一直很难让一些z索引正常工作。我所看到的是，当我从中心拖动图像并尝试将其放入外部区域的框中时，拖动图像会放置在其他所有对象的下方。一旦我把它拖到一个盒子里并试着把它拖出来，它可能会拖到其他区域，好的，也可能不会。这让我相信，img本身的z指数根本不重要，而是它的父级。我有一个滚动条在那里，似乎有一些影响的z索引，但问题仍然存在，或没有它，只是以不同的方式

我在拖动开始时将img的z索引设置为10000（我正确地看到了），在停止时将其设置回3（我也正确地看到了）。这些值对于实际解决问题没有任何作用

function makeDraggable() {
    $(".portrait").draggable({
        scroll: false,
        revert: 'invalid',
        stack: false,
        cursor: "pointer",

        start: function(event, ui) {
            $(this).css("z-index", 10000);
        },
        stop: function(event, ui) {
            $(this).css("z-index", 3);
        }
    });
};

这里有很多代码要发布，所以我在这里创建了一个提琴：

编辑：虽然我还不能让它工作，但我一直在考虑让它与其他类型的工具一起工作。使用另一个框架来实现相同类型的布局会更好吗？我想我在这里遇到的问题是我缺乏js知识，尤其是flexbox

EDIT2：由于响应低而导致碰撞

---

EDIT3：在我停止尝试并放弃此方法之前的最后一次碰撞

在

#main>championList

上设置

溢出：可见

，该方法似乎不起作用。我需要

overflow-y:scroll

创建滚动条。即使没有滚动条，如果我将img拖到左侧并将其拖走，它也会显示在主

championList

区域下方。