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是一塊「可拖動」的玉米，＃板是可以「droppable」的div，但正如你所看到的，它無法知道哪個元素被拖動/掉落，所以#cornDialog每個項目將打開。我需要一種方法來爲每一塊食物（火雞腿，蘋果等）打開不同的對話框。合理？

Answer 1

如果添加的「cornid」一jQuery data attribute每個可拖動li.corn你可以做這樣的事情：

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

如果你發佈你如何建立你的「li.corn」是我能信息建議如何添加jQuery數據屬性。