Shares

A couple of days ago, my friend Paul had a problem accepting multiple items in a jQuery droppable element to redirect to multiple places. So I thought a tutorial would do good to the developer community if I can share my solution to this problem. If you didn’t know already, this tutorial is aimed at developers with an understanding of what jQuery is and does. To those of you who don’t know what jQuery is, click here.

So basically, what a droppable element does is allows two more more draggable elements (or items) to do some work when they are dragged into it. In simpler words, dragging a draggable element into a droppable element triggers an event, which can be an alert message or redirection. Paul, my friend, had a problem redirecting his two draggables. What the problem was that only one of the draggable elements redirected properly when dropped into a droppable element. The solution I gave him is shown below. Note, this uses the jQuery UI Docs (You can explore more about jQuery UI here).

First, the Droppable and Draggable elements are one of the most commonly used elements from the jQuery UI (User Interface Library). They allow you to do cool stuff such as using them on smart-phones or mobile devices to create a cool navigation menus where users can drag and drop elements to open them instead of just clicking them. So, there’s so much you can do with the jQuery tools, it’s all upto your imagination.

So let’s create some CSS boxes for our tutorial.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

 
#draggable { 
background-color:#CCC; 
width: 100px; 
height: 100px; 
padding: 0.5em; 
float: left; 
margin: 10px 10px 10px 0; 
}
#draggable-2 { 
background-color:#E34E47; 
width: 100px; 
height: 100px; 
padding: 0.5em; 
float: left; 
margin: 10px 10px 10px 0; 
}
#droppable { 
background-color:#0F0; 
width: 150px; 
height: 150px; 
padding: 0.5em; 
float: left; 
margin: 10px; 
}
​

That’s some basic CSS there. Now, we need to write the HTML. Note the use of the jQuery UI Touch Punch (line 3) which allows the UI elements to work on a touch device like the iPhone, the iPad etc. If you exclude line 3, it might work on your computer, but it won’t work on your touch device. You can download the small library from here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.js"></script>
 
<div class="demo">
 
<div id="draggable">
    <p>Drag me to my target Grey</p>
</div>
 
<div id="draggable-2">
    <p>Drag me to my target Red</p>
</div>
 
<div id="droppable">
    <p>Drop here!</p>  
</div>
</div>

That HTML was pretty self explanatory. Now, here’s the tricky part, the jQuery function that handles everything. I believe the first few lines are easy to understand, as they are used to initialise the two draggable elements and the single droppable element. The trick here is getting the currentId of the draggable element being dragged, and based on the data, we can use it to redirect or alert the user once its is dropped in the droppable. Then from there on, a series of if and else statements can be used to control the logic, determining which draggable element does what.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(function() {
    $("#draggable").draggable();
    $("#draggable-2").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 {
                $( this )
 
                window.location = "http://www.yahoo.com/"
                alert("Yahoo OK")
            }
        }
    }); 
});​

A JSFiddle embed shows the code in action. Please feel free to comment below if you think you might have better solutions. Also, you’re welcome to use this code anywhere you want.




 
About Ali Gajani
Hi. I am Ali Gajani. I started Mr. Geek in early 2012 as a result of my growing enthusiasm and passion for technology. I love sharing my knowledge and helping out the community by creating useful, engaging and compelling content. If you want to write for Mr. Geek, just PM me on my Facebook profile.