Как изменить порядок элементов холста в DOM с помощью перетаскивания?

Question

Я хочу разрешить перетаскивание и изменение порядка слоев, похожих на фотошоп.

Предположим, у меня есть 3 элемента canvas на странице с идентификаторами a, b и c:

<canvas id="a"></canvas>
<canvas id="b"></canvas>
<canvas id="c"></canvas>

c - слой "сверху", потому что он определен последним, и они расположены абсолютно друг над другом; как я могу расположить элементы в порядке: c, a, b, где c теперь находится позади других слоев?

<canvas id="c"></canvas>
<canvas id="a"></canvas>
<canvas id="b"></canvas>

Я хочу запустить сортировку путем обнаружения перетаскивания сортировки списка следующим образом:

 <ul id="layers">
    <li>Layer C</li>
    <li>Layer B</li>
    <li>Layer A</li>
 </ul>

Вероятно, я могу использовать сортировку jQuery ui, чтобы переупорядочить список. Какой самый простой способ сделать так, чтобы DOM-порядок на полотнах отражал порядок списков? (зеркальное отображение несколько обратное, потому что список с C сверху отображает холст с C снизу.

Answer 1

Корректировка z-показателя - это определенно правильный путь. Я использовал стиль, чтобы справиться с этим для всех элементов, которые меня волнуют. Вот некоторые фрагменты из моего недавнего проекта.

Примерно так:

// brings the focus of the selected table on the canvas to the front
function adjustFocus(event, ui) {
    // clear any old focuses
    $("#table-canvas").find(".table-view").each(function (index) {
        $(this).removeClass("table-view-focus");
    });

    // add the focus to the current table
    $(this).addClass("table-view-focus");
}

Класс просто:

.table-view-focus { z-index: 10; }

Настройка фокуса называется событием запуска для перетаскивания:

// make this view draggable
        tableView.draggable({
            containment: "#table-canvas",
            handle: "h3",
            start: adjustFocus,
            drag: tableViewDrag
        });

Answer 2

Я считаю, что вы должны изменить z-порядок полотен вместо того, чтобы просто изменять их порядок, или я ошибаюсь? Во всяком случае, я бы предложил что-то вроде этого:

$("#layers").sortable({
    update: function(event, ui) {
        $("canvas").detach(); // Removes all canvases
        $("#layers li").each(function() {
            // Reinsert them in the same order of your list items
            $("#" + $(this).data("canvas")).appendTo(whereYourCanvasesWere);
        });
    }
}).disableSelection();

А в вашем HTML:

<ul id="layers">
    <li data-canvas="c">Layer C</li>
    <li data-canvas="b">Layer B</li>
    <li data-canvas="a">Layer A</li>
</ul>

Изменить: о, и если вы хотите инвертировать порядок их размещения, просто используйте prependTo вместо appendTo.