Select to view content in your preferred language

Moveble LayerList

1385
4
10-30-2017 08:48 AM
aymansalah
Occasional Contributor

I am trying to make LayerList widget movable, The problem I face if user click on LayerList(On some layer) and move it,  Layer list consider the user clicks on the Layer and toggle the visibility of the layer. 

I want to avoid the toggle visibility when user move the widget.

I tried to get the click action of the layerList but no success.

Is there any way to solve it.  

Also Is there any way to allow users to change the order of the layers by dragging layers

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Emeritus

Ayman,

   How are you make the LayerList movable? If using dojo dnd then you should just add a header portion and set the dnd handle to be the header div.

aymansalah
Occasional Contributor

That's a good idea.

I allowed the user to click anywhere on the layerlist and move it.  If I could replace the layer click function it would be good to add some custom code,

what about allowing the user to drag layers to reorder layers?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

That would be very complicated. I don't have advice for that.

0 Kudos
ThomasSolow
Frequent Contributor

You may be able to add drag and drop to move layers around using a third party library.  This looks promising: GitHub - Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about. 

I played around with this for a little bit and here's what I ended up with: https://codepen.io/solowt/pen/yPeeeL?editors=1000#0 

This isn't working completely.  There is some logical problem with how the layers are reordered.  I'm not sure where the issue is but if you really want this feature it should be doable with some work.

One thing I noticed is that I needed to push each swap event onto an array and then apply the changes after the user stopped dragging the layer element.  The logical problem may be involved with how the new index is determined.  I'll take a further look if I get a chance.