jquery ui get id of droppable element, when dropped an item
drag-and-drop, jquery-ui
Solution
To get the id of both the draggable and the droppable elements use the following:
$('.selector').droppable({ drop: Drop });
function Drop(event, ui) {
var draggableId = ui.draggable.attr("id");
var droppableId = $(this).attr("id");
}
Sorry might be a little late for you but I have just started using jquery and needed the exact thing.
Problem
How we get the id of droppable element, when dropped an item? Here i use jquery ui and asp.net mvc. ``` <table id="droppable"> <tr> <td style="width:300px;height:50px">Backlog</td> <td style="width:300px;height:50px">Ready</td> <td style="width:300px;height:50px">Working</td> <td style="width:300px;height:50px">Complete</td> <td style="width:300px;height:50px">Archive</td> </tr> <tr id="cart"> <td id="BackLog" class="drag" style="width:120px;height:50px;"> <img class="draggable" id="1234" src="../../Content/themes/base/images/ui-icons_222222_256x240.png" /> </td> <td id="Ready" class="drag" style="width:140px;height:50px"> </td> <td id="Working" class="drag" style="width:140px;height:50px"> </td> <td id="Complete" class="drag" style="width:140px;height:50px"> </td> <td id="Archive" class="drag" style="width:140px;height:50px"> </td> </tr> } </table> ``` Here i want to move image in Ist column to other column and get the id of that column. For drag and drop i use the script ``` <script type="text/javascript"> $(function () { $(".draggable").draggable({ containment: '#imageboundary', axis: "x" }); $("#droppable").droppable({ drop: function (event, ui) { $.ajax({ type: "POST", url: '/Project/AddToPhase/' + $(ui.draggable).attr("id") , success: function (data) { $('.result').html(data); } }); } }); }); </script> ```