4128 posts Community Mod Building awesome stuff for your mobile devices!
  • Community Moderator
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Interviewed on the Envato Notes blog
  • Author had a Free File of the Month
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
+9 more
Enabled Volunteer 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.

3362 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Community Moderator
  • Bought between 50 and 99 items
  • Referred more than 2000 users
  • Has been a member for 3-4 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+4 more
sevenspark Volunteer 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

4128 posts Community Mod Building awesome stuff for your mobile devices!
  • Community Moderator
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Interviewed on the Envato Notes blog
  • Author had a Free File of the Month
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
+9 more
Enabled Volunteer 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