Getting a droppable to accept multiple objects and fire different functions

Question

I need some help with getting a droppable to accept more than one item (5 div's) and depending upon which div is dropped, have a different function. I tried using if statements to no avail, unless I was using them wrong. Very new to jquery. Here's an example of my droppable function:

   $("#target1").droppable({
    accept: "#drag1",
        tolerance: 'touch',               
         drop: function() {                 
     droptrigger++
    $("#finish1").fadeTo( "fast" ,1)
    $("#drag1").fadeTo( "fast" ,0)
        fadeoutAll()        
    $("#drag1text").fadeTo( "fast" ,1)
            }

    });

If you can help, please let me know!

Answer 1

The accept: "#drag1" makes it so that the droppable area will only accept an object with the id of "drag1". The other things you are dropping won't be accepted. I'm assuming you don't have 5 different divs with the same id(I hope you don't). This isn't the most beautiful javascript in the world, but I wanted to keep it basic and wasn't completely sure the differences between the operations for what you are dropping.

Only apply your .draggable to the items you want to be able to be drug and if you really need to add the accept: back in, do it based on a unique class applied to your 5 items. You can have your droppable somewhat similar to the following

$('#target1').droppable({
  tolerance: 'touch',
  drop: function (ev, ui) {
    //gets html id of dropped item, could pass directly to function
    var droppedItemId = ui.draggable.attr('id');
    runSomeStuff(droppedItemId);
  }
});

function runSomeStuff(itemId)
{
  switch(itemId)    
  {
    case 'SomeSpecialId1':
        //do some stuff here
        break;
    case 'SomeSpecialId2':
        //do some other stuff here
        break;
    default:
        //do nothing if it isn't a special id or undefined
        break;
  }
}