Drag leaflet marker outside map
<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>