Упорядочение 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-индексов выполнены отлично. У меня вопрос, я хочу иметь четыре функции:

// 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], у которого есть 2 z-index, поэтому им нужно перейти к трем и т.д.

Есть ли простой программный способ сделать это, потому что, как только я начну это делать, это станет грязным.

важно , чтобы индексы массива не менялись. К сожалению, мы не можем отсортировать массив из-за дизайна.

Обновление Спасибо за ответы, я опубликую функции здесь, как только они будут написаны, в случае, если кто-нибудь столкнется с этим в будущем (обратите внимание, что в этом коде указан zindex в [6])

// 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

Loops!Эта функция переупорядочит поврежденные изображения вокруг нее.Он будет работать с изображениями, которые имеют широко разделенные значения 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

Не проверено, но как насчет этого?Что касается метода takeUpOne, то вы можете поменять местами zD-индексы, например:

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, или чего-то еще, что будет сочетать множество вызововto setToBack.

Редактировать: Предполагается, что список упорядочен zIndex для начала.

Answer 3

Вот оно: скопируйте свою структуру и правильно упорядочите ее, или, если вы предпочитаете, индексируйте ее.Когда вам понадобится картинка, найдите нужный z-index и продолжайте рендеринг.

Вы можете сделать это динамически и использовать кучу, если не хотите копировать всю структуру.