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

Question

Что-то новенькое в jquery, и я работаю с перетаскиваемым материалом. У меня есть две вещи и капля. Я не могу понять, как заставить его делать разные вещи, в зависимости от того, какую коробку я уронил. Вот мой 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>

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

Answer 1

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

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

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

Как получить идентификатор выпавшего элемента:

Получить идентификатор удаленного элемента вместо идентификатора цели

Answer 3

Это было бы легко с ifelse statment, потому что у вас есть только два элемента, которые нужно отбросить! Если #greatplan упал, скажем, "Великий план выбрал", иначе сказать "Плохой план выбран". Надеюсь, это поможет.