Question

I have four divs that are draggable. And a div where I drop the daggable divs. My code is basically just an API I’ve downloaded and modify a little form jQuery’s sites.

My problem is that all the divs have the same function when they are dropped. How can I make individual functions to individual divs?

It looks like this:

$(function() {
$("#draggable").draggable({ revert: "invalid" });
$("#draggable2").draggable({ revert: "invalid" });
$("#draggable3").draggable({ revert: "invalid" });
$("#draggable4").draggable({ revert: "invalid" });

$("#droppable").droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        if (document.getElementById('draggable')){
            window.location.replace("http://www.example.com");      
            }
        if (document.getElementById('draggable2')){
            window.location.replace("http://www.example2.com");     
            }
        if (document.getElementById('draggable3')){
            window.location.replace("http://www.example3.com");     
            }
        if (document.getElementById('draggable4')){
            window.location.replace("http://www.example4.com");     
            }
        }
    });
});

No luck in this code. Any ideas?

Thanks in advance!

Regards, VG

Answer 1

In your ‘if’ statements you need to do something like:

if(ui.draggable.attr('id') === 'draggable')
{
    // do stuff
}