4601 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 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.

3503 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

4601 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 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")
                }
            }
        }); 
    });

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by