I'm using a Leaflet map with markers.

When the user clicks "edit" on my page, I want to make the markers draggable. If I set the property draggable to true for each marker, it doesn't work.

When I create a new marker and set the property right from the beginning, it works.

I'm using a Leaflet map with markers.

When the user clicks "edit" on my page, I want to make the markers draggable. If I set the property draggable to true for each marker, it doesn't work.

When I create a new marker and set the property right from the beginning, it works.

• javascript
• drag-and-drop
• leaflet

2 Answers 2

You gotta do it like this:

marker.dragging.disable(); // marker.dragging.enable();

My first attempt only changes a technical property but not the behavior.

Motivated by @mc0e problem concerning 'undefined'. Here is an example.

(Based on the code from Leafletjs.com and Leafletjs quick start)

1. Open Wikimedia maps (which is based on the framework in question).
2. Open browser console (Ctrl+j or Ctrl+k) to put a Marker (you will need to define a variable first). Use Code-1.

Code-1 in console:

var markerLondon = L.marker()
    .setLatLng([51.5, -0.09])
    .bindPopup('Centre of London')
    .addTo(map)
    .openPopup();

3. Now you have a non-draggable marker. Use Code-2 to make the Marker draggable.

Code-2 in console:

markerLondon.dragging.enable();

Further reading: Marker API reference.

PS: Once Wikimedia starts using something else, you may test it with BigMap 2 (also based on the same framework) created for making static OpenStreetMap images.