CODEWITHSUNDEEP
popupleaflet
Harivignesh
Harivignesh

Reputation: 61

Draggable leaflet popup

So I have now added a Popup to a leaflet polygon and added show and hide onClick. And now What I need is when clicked and the popup is shown I want the popup to be draggable even out of the leaflet layer.

The solution doesn't have to completely upon leaflet, I just what to create a draggable popup on clicking the layer and I have already tried adding jQuery ui-draggable to the leaflet popup and it doesn't seem to work.

Upvotes: 1

Views: 2746

Answers (2)

Parampampam
Parampampam

Reputation: 21

I had a similar question and used the solution https://plnkr.co/edit/S1GPRm6sNwGDkD6oSCHs?p=preview&preview which was linked here https://github.com/Leaflet/Leaflet/issues/5982

It does't allow you to drag popups out of the map, though.

function makeDraggable(popup){
      var pos = map.latLngToLayerPoint(popup.getLatLng());
      L.DomUtil.setPosition(popup._wrapper.parentNode, pos);
      var draggable = new L.Draggable(popup._container, popup._wrapper);
      draggable.enable();
      
      draggable.on('dragend', function() {
        var pos = map.layerPointToLatLng(this._newPos);
        popup.setLatLng(pos);
      });
    }

map.on('click', function(event) {
         var popup = L.popup()
        .setLatLng(event.latlng)
        .setContent('<p>Hello world!<br />This is a nice popup.</p>')
        .openOn(map);

        makeDraggable(popup);
      });
    });

Upvotes: 2

zakariah1
zakariah1

Reputation: 394

If you want to post your code it may be easier to help, but I have used L.Draggable before.

    const div = L.DomUtil.create('div', 'map_legend');
    const draggable = new L.Draggable(div)
    draggable.enable()

Upvotes: 0

Related Questions