“画布”中的可排序图像通过图层可排序选项 JQUERY UI

Question

帮助我，我认为我很愚蠢或什么的。我需要在对所有内容进行排序时更改图像的 z 索引...我已经停止思考请帮助我。

当我将图像添加到“画布”（不是标签）时，我有放置功能

drop: function (event, ui){
        console.log(ui)
        let tmp_layer = [];
        tmp_layer.id = Date.now()
        tmp_layer.name = ''
        tmp_layer.width = helper[0].width
        tmp_layer.height = helper[0].height
        tmp_layer.posx = 0
        tmp_layer.posy = 0
        tmp_layer.rot = 0
        tmp_layer.opacity = 1
        tmp_layer.prlxSpd = 0
        tmp_layer.objid = helper.data('objid')
        tmp_layer.url = helper.data('imagename')
        tmp_layer.thumbUrl = helper[0].src
        tmp_layer.objconid = ''
        tmp_layer.zIndex = layers.length
        layers.push(tmp_layer)
        newImage(tmp_layer)

        prependLayers(tmp_layer)
    }

这给了一个层到层数组。现在我可以排序了。单击图层时可排序。 https://ibb.co/cwJS9VG 如你所见。在可排序层中，从顶部（右侧）的第一个索引为 0，底部为 1。zindex 应为 ofc。反了。

我需要以某种方式更改图像的 z 索引，同时可对画布中的图像进行排序，以便相应地在后面或顶部......但是......我很困惑如何为此创建算法。有人可以帮我吗？

这是我第三次尝试。没有成功

$('#layer-window').sortable({
    handle: ".handle",
    start: function (event, ui){
        startPost = ui.item.index()
    },
    stop: function ( event, ui){
        let it0 = 0;
        let images = []
        newPos = layers.length - 1 - ui.item.index() // here we can calculate new reversed index
        if(ui.item.index() > startPost){
            $(layers).each(function (elm) {
                if (layers[it0].zIndex < ui.item.index()){
                    layers[it0].zIndex = layers[it0].zIndex + 1
                    $('#img-'+layers[it0].id).css('zIndex', layers[it0].zIndex)
                }
                $(ui.item).css('zIndex', newPos)
                it0++
            })
        }else if(ui.item.index < startPost){
            $(layers).each(function (elm) {
                if (layers[it0].zIndex > ui.item.index()){
                    layers[it0].zIndex = layers[it0].zIndex - 1
                    $('#img-'+layers[it0].id).css('zIndex', layers[it0].zIndex)
                }
                $(ui.item).css('zIndex', newPos)
                it0++
            })
        }
    }
})