4189 posts Community Mod Building awesome stuff for your mobile devices!
    Has referred 100+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 1+ items on Envato Market
+14 more
Enabled Envato team says

I was wondering if anyone here can help me out with some jQuery. Basically, I have 2 boxes. They can both be dragged into one box. That box should redirect to link 1 if box 1 is over it, and redirect to link 2 if box 2 is over it. The problem is, it’s only redirecting one of the boxes.
Here is the code!

    $(function() {
        $( "#draggable" ).draggable();
        $( "#draggable-2" ).draggable();

        $( "#droppable" ).droppable({

            accept:"#draggable",
            drop: function() {window.location = "http://www.google.com/"},

            accept:"#draggable-2",
            drop: function() {window.location = "http://www.yahoo.com/"}
        })
    });

In the end I’ll probably want to add even more draggable elements, but at the moment if I get this to working I’ll start dancing!

The live code can be viewed here! Only the orange/red box redirects the gray one fails to do anything.

3429 posts
    Has referred 1000+ members Has sold $500,000+ on Envato Market Has collected 100+ items on Envato Market Elite Author: Sold more than $75,000 on Envato Market
+10 more
sevenspark Envato team says

Hey Paul,

You’re misunderstanding how the droppable parameters work. You can’t have two accept and/or two drop parameters. Parameters don’t work like a switch statement.

What you need is define one drop callback function that will inspect the element that has just been dropped and redirect to the appropriate location based on that.

Take a look at the drop event definition to see how you can use the function’s parameters to determine which element has been dropped (ui.draggable).

Hope that helps! :)

Chris

4189 posts Community Mod Building awesome stuff for your mobile devices!
    Has referred 100+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 1+ items on Envato Market
+14 more
Enabled Envato team says

Hey Paul,

You’re misunderstanding how the droppable parameters work. You can’t have two accept and/or two drop parameters. Parameters don’t work like a switch statement.

What you need is define one drop callback function that will inspect the element that has just been dropped and redirect to the appropriate location based on that.

Take a look at the drop event definition to see how you can use the function’s parameters to determine which element has been dropped (ui.draggable).

Hope that helps! :)

Chris

Thanks Chris, got some help from the Envato Facebook group! Thanks a billion to Ali Gajani

Here is the code if anyone else hits this problem!

    $(function() {
        $("#draggable").draggable();
        $("#draggable-2").draggable();
        $("#draggable-3").draggable();
        $("#draggable-4").draggable();

        $( "#droppable" ).droppable({ 
            drop: function( event, ui ) {
                var currentId = $(ui.draggable).attr('id');

                if(currentId == "draggable"){
                $(this) 
                    window.location = "http://www.google.com/" 
                    alert("Google OK")
                }else if(currentId =="draggable-2"){
                    $(this)
                    window.location = "http://www.yahoo.com/" 
                    alert("Yahoo OK")
                }else if(currentId =="draggable-3"){
                    $(this)
                    window.location = "http://www.envato.com/" 
                    alert("Envato OK")
                }
                else if(currentId =="draggable-4"){
                    $(this)
                    window.location = "http://www.themeforest.com/" 
                    alert("ThemeForest OK")
                }
            }
        }); 
    });
by
by
by
by
by
by