Getting Property Values of Dropped Object in JQuery UI - jquery-ui

Question

I am (working with one of my students) using jqueryui getting the properties of a dropped object. The object that is being dropped is an image. All images are set to draggable through a single jquery call to draggable.
The challenge here is really getting any of the properties of the object being dropped on the drop target. the drop event handler works fine (I can easily alert on it) - but have not been able to get any of the properties of the objects being dropped.
This code is also available at http://jsfiddle.net/reaglin/FUvT8/4/
Note - the real action occurs when
(1) draggable() is called to make objects droppable
(2) The image is created and added to the document body
(3) The handleDropEvent is called.
This is a good example for working with playing cards - but this example uses Dr. Who characters.
$ (init);
function image(id, image1) {
this.id = id;
this.image1 = image1;
}
$('#deal').click(function () {dealAll(
dealCard(randomCard()));
});
$(function() {
$( "#draggable" ).draggable({ containment: "#left"});
});
function init() {
$('.drop').droppable( {
drop: handleDropEvent
} );
$("img").draggable();
}
// global variables
var cardsInDeck = new Array();
var numberOfCardsInDeck = 15;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";
var cardsDealt = new Array();
// deal 5 cards at once - works
function dealAll(){
var z=0;
for (z=0;z<5;z++) {
cardsDealt[z] = new Image(z,dealCard(randomCard()));
}
}
//deal cards - works
function dealCard(i) {
if (numberOfCardsInDeck == 0) return false;
var $img = new Image();
$img.src = "http://debsiepalmer.com/images/companions/" + cardsInDeck[i] + ".jpg";
// Here I set the ID of the object
$img.id=cardsInDeck[i];
$img.class='drag';
$("img").draggable();
document.body.appendChild($img);
removeCard(i);
return $img;
}
// deal randomly - works
function randomCard() {
return Math.floor(Math.random() * numberOfCardsInDeck);
}
// remove spent cards from pool -works
function removeCard(c)
{
for (j=c; j <= numberOfCardsInDeck - 2; j++)
{
cardsInDeck[j] = cardsInDeck[j+1];
}
numberOfCardsInDeck--;
numberOfCardsInDeck--;
numberOfCardsInDeck--;
}
// this is what to do when card drops in tardis
function handleDropEvent( event, ui ) {
// Here I want the id of the dropped object
}

Answer 1

Researching a bit more on the documentation for jqueryui - provides these answers;
First when the image is declared draggable - this needs to be done after it is added to the document.body - this is because jquery selector uses the DOM to create the list of objects - so the lines
$("img").draggable();
document.body.appendChild($img);
would be changed to
document.body.appendChild($img);
$("img").draggable();
also in this example all images are declared to be draggable, we can be more specific however and just make the appended image to the document draggable.
document.body.appendChild($img);
$('#'+$img.id).draggable();
Once the image is made draggable - the properties of the object passed to the handleDropEvent are event and ui - the draggable property of the ui object is a jquery object which does have access to the attributes of the object it contains;
function handleDropEvent( event, ui ) {
alert(ui.draggable.attr("id"));
}