title: Drag leaflet marker outside map
body: <p>I am using leaflet markers in my ASP.NET MVC 5 application.</p>
  
  <p>I need to drag marker outside application to a div element, where I want to get its id to perform further operations.</p>
  
  <pre><code>    marker=new  L.marker([latNumber,longNumber], {draggable:'true'});
      marker.id = "ABC";
      $('#'+ marker.id).draggable();  // draggable jquery UI
      marker.on('dragend', function(event){
  
  
      var marker = event.target;
      var position = marker.getLatLng();
      console.log(position);
      marker.setLatLng(position,{draggable:'true'}).bindPopup(position).update();
  });
  </code></pre>
  
  <p>On the other hand I am using droppable element of jquery UI</p>
  
  <pre><code>  $("#navs").droppable({
          drop: function (event, ui) {
              alert('dropped')
          }
      });
  </code></pre>
  
  <p>I do not get dropped event on navs element when I drop it over it. What changes I need to do to make it work.</p>
  
  <p>If someone can further explain <a href="https://stackoverflow.com/questions/27835817/how-can-i-drag-a-marker-out-of-the-map">this</a>, it would be of great help too.</p>