4341 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 Moderator 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.

3448 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Located in United States
  • Helps us moderate the forums
+10 more
sevenspark Moderator 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

4341 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 Moderator 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