jquery-ui - JQuery UI でドロップされたオブジェクトのプロパティ値を取得する

Question

私は（私の学生の一人と一緒に）ドロップされたオブジェクトのプロパティを取得するjqueryuiを使用しています。ドロップされるオブジェクトはイメージです。すべての画像は、ドラッグ可能への 1 回の jquery 呼び出しによってドラッグ可能に設定されます。

ここでの課題は、ドロップ ターゲットにドロップされるオブジェクトのプロパティを実際に取得することです。ドロップ イベント ハンドラーは正常に動作します (簡単にアラートを出すことができます) - しかし、ドロップされるオブジェクトのプロパティを取得できませんでした。

このコードは、http://jsfiddle.net/reaglin/FUvT8/4/でも入手できます。

注 - 実際のアクションは次の場合に発生します。

(1) draggable() が呼び出され、オブジェクトがドロップ可能になります (2) 画像が作成され、ドキュメントの本文に追加されます (3) handleDropEvent が呼び出されます。

これはトランプを操作するための良い例ですが、この例では Dr. Who のキャラクターを使用しています。

$ (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
}