In the final step, we implement some logic to change the layer order. The code for this example is named ch03_layerorder. As we want to have a convenient and full GUI implementation, we use the HTML5 Drag and Drop API to achieve our task.
This API needs a simple draggable declaration on an element and a set of dragging-related events. The browser needs to know what to do when an element is dragged; when it is over, another element is declared draggable in a case where it is dropped due to such an element. First, we prepare our layer elements by creating a CSS class to give visual feedback when a layer is dragged over another one:
.layer.over {
border-top: 3px solid black;
}Next, we extend our createRegistry function to make this process possible:
this.createRegistry = function (layer, buffer) {
[…]
var _this = this;
layerDiv.draggable = true;
layerDiv.addEventListener('dragstart', function (evt) {
evt.dataTransfer...