Mastering OpenLayers 3

Changing the layer order with the Drag and Drop API

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 ...