Select to view content in your preferred language

Limit LayerList dragEnabled to top level

288
2
Jump to solution
01-01-2025 12:49 PM
CalebSchwind
Occasional Contributor

Hello,

 

I have a layer list with dragEnabled set to true. This is a nice feature but one of my apps I would like to lock this down so that users can't drag children of a group layer outside of the group layer. Is this possible? If not could, I would like to request this feature be added. 

0 Kudos
1 Solution

Accepted Solutions
Sage_Wall
Esri Regular Contributor

Hi @CalebSchwind ,

You can set the childrenSortable property on the ListItem within the listItemCreatedFunction .  You could limit this to just group layers or set it for all child layers like this.

https://codepen.io/sagewall/pen/mybqbXm

        // A function that executes each time a ListItem is created for a layer.
        arcgisLayerList.listItemCreatedFunction = (event) => {
          // The event object contains an item property.
          // It is a ListItem referencing the associated layer
          // and other properties. You can control the visibility of the
          // item, its title, and actions using this object.
          const { item } = event;
          
          // Prevent drag and drop on all child layers
          item.childrenSortable = false;
          
          // Or if you wanted to limit to group layers
          // if (item.layer.type === "group") {
          //   item.childrenSortable = false;
          // }
         }

View solution in original post

2 Replies
Sage_Wall
Esri Regular Contributor

Hi @CalebSchwind ,

You can set the childrenSortable property on the ListItem within the listItemCreatedFunction .  You could limit this to just group layers or set it for all child layers like this.

https://codepen.io/sagewall/pen/mybqbXm

        // A function that executes each time a ListItem is created for a layer.
        arcgisLayerList.listItemCreatedFunction = (event) => {
          // The event object contains an item property.
          // It is a ListItem referencing the associated layer
          // and other properties. You can control the visibility of the
          // item, its title, and actions using this object.
          const { item } = event;
          
          // Prevent drag and drop on all child layers
          item.childrenSortable = false;
          
          // Or if you wanted to limit to group layers
          // if (item.layer.type === "group") {
          //   item.childrenSortable = false;
          // }
         }
CalebSchwind
Occasional Contributor

That worked thank you!