Question

Is it possible to have multiple draggables and one droppable, but with different droppable functions? Please take a look at my code and my example. I’m trying to accomplish that when you drop the second div, it says “you dropped the other one”. I’m planning on making more draggable divs, but for the example I only used two draggables and one droppable.

JsFiddle

JS

$("#draggable_one").draggable({

    revert: true
});


$("#draggable_two").draggable({

   revert: true
});

$("#theonlydroppable").droppable({
    drop: function(event, ui) {
  $(this).html("you dropped one");

    }
});

HTML

         <div id="draggable_one">
          draggable one
         </div>
         <div id="draggable_two">
            draggable two
         </div>

         <div id="theonlydroppable">
            Drop it like it's hot
         </div>

Answer 1

Just add a condition to check which draggable was dropped, and take the appropriate action:

$("#theonlydroppable").droppable({
    drop: function(event, ui) {
        if (ui.draggable.is('#draggable_one')) {
            $(this).html("you dropped one");
        } else {
            $(this).html("you dropped the other one");
        }
    }
});

Here is a demonstration: http://jsfiddle.net/yMDB3/1/