对数组中的 z 索引进行排序

Question

我有一个数组，看起来类似于

resourceData[0][0] = "pic1.jpg";
resourceData[0][1] = 5;

resourceData[1][0] = "pic2.jpg";
resourceData[1][1] = 2;

resourceData[2][0] = "pic3.jpg";
resourceData[2][1] = 900;

resourceData[3][0] = "pic4.jpg";
resourceData[3][1] = 1;

数字表示图像的 z 索引。最小 z-index 值是 1。最大值（不是很重要）是 2000。

我已经完成了所有渲染和设置 z-indexes。我的问题是，我想要四个函数：

// Brings image to z front
function bringToFront(resourceIndex) {

    // Set z-index to max + 1
    resourceData[resourceIndex][1] = getBiggestZindex() + 1;

    // Change CSS property of image to bring to front
    $('#imgD' + resourceIndex).css("z-index", resourceData[resourceIndex][1]);
}

function bringUpOne(resourceIndex) {

}

function bringDownOne(resourceIndex) {

}

// Send to back z
function sendToBack(resourceIndex) {

}

因此给定索引 [3] (900 z)：

如果我们将其发送到后面，它将取值 1，而 [3] 将必须变为 2，但是这与 [1] 冲突，[1] 的 z 索引为 2，所以他们需要转到 3，等等。

有没有一种简单的编程方法可以做到这一点，因为一旦我开始这样做，它就会变得混乱。

数组的索引不改变是重要的。不幸的是，由于设计原因，我们无法对数组进行排序。

更新 感谢您的回答，一旦编写好函数，我就会在这里发布这些函数，以防将来有人遇到这个问题（请注意，此代码在[6]中列出了 zindex）

// Send to back z
function sendToBack(resourceIndex) {

    resourceData[resourceIndex][6] = 1;
    $('#imgD' + resourceIndex).css("z-index", 1);

    for (i = 0; i < resourceData.length; i++) {
        if (i != resourceIndex) {
            resourceData[i][6]++;
            $('#imgD' + i).css("z-index", resourceData[i][6]);
        }
    }    
}

Answer 1

循环！此功能将对其周围受影响的图像重新排序。它将适用于具有广泛分离的 z-index 值的图像。除非需要，它也不会执行任何更改。

编辑：添加了完成 CSS 工作的功能
编辑2：更正了顶部/底部功能的问题 - 它没有移动所有受影响的图像，现在是了。

var resourceData = Array();
resourceData[0] = Array();
resourceData[0][0] = "pic1.jpg";
resourceData[0][1] = 5;

resourceData[1] = Array();
resourceData[1][0] = "pic2.jpg";
resourceData[1][1] = 2;

resourceData[2] = Array();
resourceData[2][0] = "pic3.jpg";
resourceData[2][1] = 900;

resourceData[3] = Array();
resourceData[3][0] = "pic4.jpg";
resourceData[3][1] = 1;

function _doMoveImage(ptr) {
    // Change CSS property of image
    $('#imgD' + ptr).css("z-index", resourceData[ptr][1]);
}

// Brings image to z front
function bringToFront(resourceIndex) {
    var highest_idx = 0;
    for (var i = 0; i < resourceData.length; i++) {
        // for all images except the target
        if (i != resourceIndex) {
            // preserve the highest index we encounter
            if (highest_idx < resourceData[i][1])
                highest_idx = resourceData[i][1];
            // move any images higher than the target down by one
            if (resourceData[i][1] > resourceData[resourceIndex][1]) {
                resourceData[i][1]--;
                _doMoveImage(i);
            }
        }
    }

    // now move the target to the highest spot, only if needed
    if (resourceData[resourceIndex][1] < highest_idx) {
        resourceData[resourceIndex][1] = highest_idx;
        _doMoveImage(resourceIndex);
    }

    return;
}

function bringUpOne(resourceIndex) {
    var next_idx = 2000;
    var next_ptr = false;
    for (var i =0; i < resourceData.length; i++) {
        // for all images except the target
        if (
            i != resourceIndex &&  
            next_idx > resourceData[i][1] && 
            resourceData[i][1] > resourceData[resourceIndex][1]
        ){
            next_idx = resourceData[i][1];
            next_ptr = i;
        }
    }

    // only move if needed
    if (next_ptr) {
        // target takes next's index
        resourceData[resourceIndex][1] = resourceData[next_ptr][1];
        // next's index decreases by one
        resourceData[next_ptr][1]--;
        _doMoveImage(resourceIndex);
        _doMoveImage(next_ptr);
    }
    return;
}

function bringDownOne(resourceIndex) {
    var next_idx = 0;
    var next_ptr = false;
    for (var i =0; i < resourceData.length; i++) {
        // for all images except the target
        if (
            i != resourceIndex &&  
            next_idx < resourceData[i][1] && 
            resourceData[i][1] < resourceData[resourceIndex][1]
        ){
            next_idx = resourceData[i][1];
            next_ptr = i;
        }
    }
    // only move if needed
    if (next_ptr) {
        // target takes next's index
        resourceData[resourceIndex][1] = resourceData[next_ptr][1];
        // next's index decreases by one
        resourceData[next_ptr][1]++;
        _doMoveImage(resourceIndex);
        _doMoveImage(next_ptr);
    }
}

// Send to back z
function sendToBack(resourceIndex) {
    var lowest_idx = 2000;
    for (var i = 0; i < resourceData.length; i++) {
        // for all images except the target
        if (i != resourceIndex) {
            // preserve the lowest index we encounter
            if (lowest_idx > resourceData[i][1])
                lowest_idx = resourceData[i][1];
            // move any images lower than the target up by one
            if (resourceData[i][1] < resourceData[resourceIndex][1]) {
                resourceData[i][1]++;
                _doMoveImage(i);
            }
        }
    }

    // now move the target to the lowest spot, only if needed
    if (resourceData[resourceIndex][1] > lowest_idx) {
        resourceData[resourceIndex][1] = lowest_idx;
        _doMoveImage(resourceIndex);
    }
    return;
}

Answer 2

就是这样：复制您的结构并对其进行正确排序，或者如果您愿意将其称为索引。当您需要图片时，找到正确的 z-index 并继续进行渲染。

如果您不想复制整个结构，您可以动态地执行此操作并使用堆。

Answer 3

没有测试过，但是这个怎么样。对于bringUpOne、bringDownOne，您可以交换z-indexes，例如：

function bringUpOne(resourceIndex) {

    var myZIndex = resourceData[resourceIndex][1];
    var nextZIndex =  resourceData[resourceIndex + 1][1];

    resourceData[resourceIndex][1] = nextZIndex;
    resourceData[resourceIndex + 1][1] = myZindex;

}

对于带到前面：

function bringToFront(resourceIndex) {

    var maxZIndex = resourceData[maxResourceIndex][1];
    resourceData[resourceIndex][1] = maxZIndex + 1;

}

现在一切都很好。但是，如果您想连续将图像设置到后面，会发生什么情况呢？您可以每次将 zIndex 设置为 0（不知道在任何时候实际上有多少个可见），或者您可以从最低的 zIndex 设置为 2000 或 10000 等，这将容纳许多调用设置为返回。

编辑：这假设列表是按 zIndex 排序的。