Jquery Draggable and Droppable with Multiple Draggable

Question

Kind of new to jquery and I am working with the draggable and droppable stuff. I have two draggables and a droppable. I can't quite figure out how to make it do different things based on which box I drop. Here is my 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!" )

                }
          });

})

And my 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>

No matter which box I drag into the droppable I always get "Poor Plan!". Any ideas?

score 1 · Answer 1 · answered May 14 '15 at 16:45

You need one drop handler, with a test for which draggable element was dropped.

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

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

In your code you are overwritting the code that handles the drop event. It is going to always return poor plan because that is the most recent definition for it. You will have to differentiate between the ID of the object being dropped inside of the .droppable function.

How to get the dropped element's ID:

Get dropped elements id instead of drop target id

edited May 23 '17 at 12:06

Community

1
1

answered May 14 '15 at 16:44

Dr Shenanigan

163
2
9

But the OP is using jQuery draggable/droppable, not native HTML5! There's a massive difference. – Roamer-1888 May 14 '15 at 16:55
1

You are completely right, I totally goofed on how to get the draggable id. – Dr Shenanigan May 14 '15 at 17:01

score 0 · Answer 3 · answered May 14 '15 at 17:00

0

This would be easy with an if else statment, because you only have two elements to be dropped! If #greatplan is dropped, say "Great plan picked", else say "Poor plan picked". Hope that helps.

answered May 14 '15 at 17:00

Clay H

31
7

Jquery Draggable and Droppable with Multiple Draggable

3 Answers3