The following code shows drag and drop feature of the jQueryUI and also collects the DOM Id of the element dragged.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> #draggable { width: 70px; height: 70px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ classes: { "ui-droppable-hover": "ui-state-hover" }, drop: function( event, ui ) { $(this).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); var id = ui.draggable.attr("id"); alert(id) } }); }); </script> <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> </div>