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>
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.