如何通過拖放對dom中的畫布元素進行重新排序？

Question

我想允許對像photoshop一樣的圖層進行拖放重新排序。

假設我在頁面中具有ID為a，b和c的3個canvas元素：

<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 sort來允許列表的重新排序。 使畫布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 。