如何通过拖放来重新排序dom中的canvas元素？

Question

我想允许对类似 Photoshop 的图层进行拖放重新排序。

假设我在页面中有 3 个画布元素，id 为 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 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。