title: Leaflet on drag updating lat, lng variables
body: <p>I am trying to allow the user to create only one marker on my leaflet map. This is working fine:</p>
  
  <pre><code>var map = L.map("map").setView([-41.5, 173], 6);
  var lat = 0.0;
  var lon = 0.0;
  var marker;
  
  // on map click: get lat, lon - only allowed to happen once
  var onClick = function(e) {
      map.off('click', onClick); //turn off listener for map click
      marker = L.marker(e.latlng,{icon: pin, draggable: true}).addTo(map);
      lat = e.latlng.lat;
      lon = e.latlng.lng;
      document.getElementById('outlat').innerHTML = e.latlng.lat;
      document.getElementById('outlon').innerHTML = e.latlng.lng;
  };
  map.on('click', onClick); //calling
  </code></pre>
  
  <p>The problem is that I need the coordinate variables to update when the single marker is dragged to a new location. I have tried a few ways of doing this with no luck:</p>
  
  <pre><code>marker.addListener('down', onDrag);
  marker.addListener('drag', onDrag);
  marker.addListener('dragend', onDrag);
  
  // on drag: update lat and lon
  var onDrag = function (e) {
      lat = e.latlng.lat;
      lon = e.latlng.lng;
      document.getElementById('outlat').innerHTML = lat;
      document.getElementById('outlon').innerHTML = lon;
  };
  map.on('down', onDrag);
  map.on('dragstart', onDrag);    
  map.on('dragend', onDrag);
  </code></pre>
  
  <p>Thanks</p>