JQuery Draggable и Droppable с несколькими Draggable

Question

Тип нового jQuery, и я работаю с перетаскиваемым и отбрасываемым материалом. У меня есть два перетаскивания и droppable. Я не могу понять, как заставить его делать разные вещи, основываясь на том, какую коробку я бросаю. Вот мой JQuery:

 $(function() { 
      $("#greatplan").draggable(); 
      $("#droppable").droppable({ 
       drop: function(event, ui) { 
       $(this) 
        .addClass("ui-state-highlight") 
        .find("p") 
        .html("Great Plan Picked!") 
       } 
      }); 
      $("#poorplan").draggable(); 
      $("#droppable").droppable({ 
       drop: function(event, ui) { 
       $(this) 
        .addClass("ui-state-highlight") 
        .find("p") 
        .html("Poor Plan Picked!") 

       } 
      }); 

})

И мой HTML:

  <div id="greatplan" class="ui-widget-content"> 
      <p>Great Plan!</p> 
     </div> 
     <br> 
     <div id="poorplan" class="ui-widget-content"> 
      <p>Poor Plan!</p> 
     </div> 

     <div id="droppable" class="ui-widget-header"> 
      <p>Drop your plan here</p> 
     </div> 

Независимо от того, который боксировать таскаю в Droppable я всегда получаю "Плохой план!". Есть идеи?

Answer 1

В вашем коде вы заменяете код, который обрабатывает событие drop. Он всегда будет возвращать плохой план, потому что это самое последнее определение для него. Вам нужно будет различать идентификатор объекта, который выпадает внутри функции .droppable.

Как получить ID отброшенного элемента:

Get dropped elements id instead of drop target id

Answer 2

Вам нужен один обработчика сбрасывания, с тестом, для которого был сброшен перетаскиваемый элемент.

$(function() { 
    $("#greatplan").draggable(); 
    $("#poorplan").draggable(); 

    $("#droppable").droppable({ 
     drop: function (event, ui) { 
      switch (ui.draggable.attr('id')) { 
       case "greatplan": 
        $(this).addClass("ui-state-highlight").find("p").html("Great Plan Picked!"); 
        break; 
       case "poorplan": 
        $(this).addClass("ui-state-highlight").find("p").html("Poor Plan Picked!") 
        break; 
      } 
     } 
    }); 
}); 

DEMO

Answer 3

Это было бы легко с ifelse даного, потому что у вас есть только два элемента, чтобы быть отброшены! Если #greatplan отбрасывается, скажите «Большой план выбрали», иначе скажите «Бедный план выбран». Надеюсь, это поможет.