如何通過拖放重新排列DOM中的畫布元素？

我想允許拖放式重新排序類似photoshop的圖層。如何通過拖放重新排列DOM中的畫布元素？

假設我在第3個畫布元素與IDS的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 on-top的列表映射到C上的畫布。

來源

2012-01-08 Homan

我相信你必須改變畫布的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。

來源

2012-01-08 06:22:05 mgibsonbr

是的，重新排序z-index可能是最有效的方法，而不是重新安排dom來強制z索引更改。 – Homan 2012-01-08 18:16:05

調整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 
     });

來源

2012-01-08 07:15:32 uadrive

如何通過拖放重新排列DOM中的畫布元素？

回答

相關問題