How to Drag a Marker if you click it? Leaflet

Question

Good Day to everyone, Im developing a site that has a mapping features. My goal here is make it drag if you click the marker.

Here is my code

else if (select1.value === "Arson"){



var note = document.getElementById('note');
var datepick = document.getElementById('demo1');
var timepick = document.getElementById('timepick');
        layerpoly.on('click', function(e){
        var markerA = new L.Marker(e.latlng,{icon: Icon1});
        markerA.bindPopup("</a><br><strong>ARSON</strong></br><strong>Date:</strong>"+datepick.value+"</br><strong>Time:</strong>"+timepick.value+"</br><strong>Address:</strong>"+note.value+"<strong><br><strong>Suspect Sketch</strong><br><a href=legends/suspect.jpg rel=lightbox><img src = legends/suspect.jpg height=100 width = 100/><br> ").addTo(map);
        closure1 (markerA)
        var ll = markerA.getLatLng();
document.querySelector('#userLat').value = ll.lat;
document.querySelector('#userLng').value = ll.lng;
marker.dragging.enable();

        });

        }

The output of the code above is if i select arson. I will place a marker on map. My question is how can i make it draggable if click that marker?

by the way this code

document.querySelector('#userLat').value = ll.lat;
    document.querySelector('#userLng').value = ll.lng;

is connected into two textboxes with id of userLat and useLng. How can i update this textbox if i drag that marker?

Any Help? TY

Answer 1

Here's the documentation for L.Marker : http://leafletjs.com/reference.html#marker As you can see there is absolutely no method called dragging.enable so calling marker.dragging.enable(); will never work and should throw an obvious error to your browserconsole. There is however a draggable option which you can use when you instanciate the marker:

var markerA = new L.Marker(e.latlng,{
    icon: Icon1,
    draggable: true
});

Here's a working example on Plunker: http://plnkr.co/edit/Au3XlD?p=preview