Dragging LayerList Items to Re-order Layers

09-09-2019 11:55 PM
New Contributor III

I'm working on making LayerList items to be draggable so that users would be able to reorder the layers by dragging them. I've found Shopify Draggable might be the closest approach. However, the application(open CodePen) loses some of its functionalities after the LayerList is dragged. It's a shame that v4.x doesn't support dragging natively like v3.x did. Is there any other way to perfectly reorder LayerList layers with dragging?

1 Reply
Esri Contributor


I used the dojo Drag and Drop package in the LayerListView.js file. 

This code is probably 2 year old  Below are some  code snippets. Hope it helps. This is done for js 3

_setUpDnD: function () {
 this.dndList = new Source(this.layerListTable, {
  skipForm: true,
  withHandles: true,
  creator: dojo.hitch(this, this.createItem)
 dojo.connect(this.dndList, "onDropInternal", this, "onDrop");
 this.dndContainer = new Container(this.layerListTable);

 onDrop: function (nodes) {

 var layertrArr = dojo.query('.jimu-widget-wslayerList .dojoDndHandle')

 //VT: we need to loop through everything to ensure the structure integrity in the <table>.
  let layertrNodeId=dojo.attr(layertr,'layertrnodeid');
  let nextSiblingNodeId = layertr.nextSibling?dojo.attr(layertr.nextSibling,'layercontenttrnodeid'):'';
  if(!nextSiblingNodeId || nextSiblingNodeId!==layertrNodeId){
   let node = dojo.query('[layercontenttrnodeid="'+ layertrNodeId +'"]')
   this.layerListTable.insertBefore(node[0], layertr.nextSibling);

 this.emit('dnd-drop', nodes);

 var previousNode=null;              

 var allNodes = this.dndList.getAllNodes();
 for(var i = 0; i < allNodes.length; i ++){
   previousNode = allNodes;

 var layerInfo = this.dndList.getItem(nodes[0].id).data;
 var steps = this._getMovedStepsAfterDnD(layerInfo , previousNode?this.dndList.getItem(previousNode.id).data:null);


0 Kudos