jQueryのドラッグ＆ドロップ - ドロップされたアイテムごとに異なるモーダル？

Question

ちょうど私の他の質問に答えました（モーダルはドロップでは開きませんでした）。

 
    $("#table #food li.corn").draggable({ 
      revert: "invalid", 
      hoverClass: "ui-state-active" 
    }); 
    $("#plate ul").droppable({ 
     hoverClass: "ui-state-active", 
     drop: function(event, ui) { 
      $(this).addClass("ui-state-highlight"); 
      $("#cornDialog").dialog("open"); 
     } 
    }); 
    $("#cornDialog").dialog({ 
     autoOpen: false, 
     show: "blind", 
     hide: "slow" 
    }); 

#cornDialogは、トウモロコシの一部が落下したときに開くモーダルです。今、私は新しい問題を抱えています。 li.cornは "draggable"のコーンです。＃plateは "落書き"のdivですが、どの要素がドラッグ＆ドロップされているかを知る方法はありません。#cornDialogはすべてのアイテムに対して開かれます。私は食べ物（七面鳥の脚、リンゴなど）ごとに異なるダイアログを開く方法が必要です。理にかなっている？

Answer 1

あなたはこのような何か行うことができますli.cornは、各ドラッグ可能に「cornid」のjQuery data attributeを追加する場合：あなたは私ができるあなたの「li.corn」Sの作成方法についての情報を投稿する場合

$("#plate ul").droppable({ 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 
     $(this).addClass("ui-state-highlight"); 
     $("#cornDialog" + $(ui.draggable).data("cornid")).dialog("open"); 
    } 
}); 

をjQueryデータ属性を追加する方法について助言してください。