jquery draggable & droppable get source container (that draggable came from) - jquery-ui

Question

I made this jsfiddle for a different answer and I'm wondering how I can get the souce container that the droppable came from
http://jsfiddle.net/d7wsz/8/
The jquery is
$("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled), #Table3 tr:not(.disabled)").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#Table1, #Table2, #Table3").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
alert($(ui.draggable).text() +
' was draged from ' +
'XX' + ' to ' +
$(this).attr('id') + '.');
}
});
and the html is
<h1>Table 1</h1>
<table id="Table1">
<tr><td>Row 3</td></tr>
<tr class='disabled'><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
</table>
<h2>Table 2</h2>
<table id="Table2">
<tr><td>Row 8</td></tr>
<tr class='disabled'><td>Row 9</td></tr>
<tr><td>Row 10</td></tr>
</table>
<h2>Table 3</h2>
<table id="Table3">
<tr><td>Row 11</td></tr>
<tr><td>Row 12</td></tr>
</table>

Answer 1

You can use a variable which you set in the start event of the draggable and get that info in the stop event of the droppable.
$(function () {
var sourceElement;
$("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled), #Table3 tr:not(.disabled)").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
//NEW
sourceElement = $(this).closest('table').attr('id');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#Table1, #Table2, #Table3").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
//alert sourceElement
alert($(ui.draggable).text() +
' was draged from ' + sourceElement + ' to ' + $(this).attr('id') + '.');
}
});
});
See my updated jsfiddle
If you have more than those tables on your page you might think about giving them a class to properly identify them.