How to create drag & drop interaction with jQuery

One of the more interesting actions in visual interfaces is the ability to drag an object and drop it on a selected target. Pretty much like what we do in real life at the supermarket. Grab a beer – drag to cart – drop it in the cart. But there are attributes in the product that it would be interesting to unveil in an application. For example, when you grab a beer you can feel if it’s cold or not, and when you get to the checkout you pay the price of the bottle, which is a hidden attribute of the bottle. Today we will learn how to create drag & drop using  jQuery and adding hidden attributes to the draggable items.

This is what we will be creating: when you start dragging the box, a block will display additional info about that object. It could be text as well as an image, but in order to make things easy I just added some text. Next, when you drop the item on the target area, a message will be displayed along with other hidden information contained in the object.

Example for drag & drop interaction

Markup structure

We will define a container to prevent dragging the element out of boundaries. Next, the draggable elements and within each element, we will add two blocks of hidden info and finally the number that serves as label.

[html]
<div class="container">

<div class="draggable">
<span>Black is not a color, is simply the absence of light</span>

<small>Drop this to find out if black is a color</small>

<p>1</p>
</div>

<div class="draggable">
<span>You’re a genius!</span>

<small>Drop this number to find out your IQ!</small>

<p>2</p>
</div>

<div class="droppable">
<p>Drop it! <br/>Right here, right now.</p>
</div>

</div>
[/html]

CSS definitions

The css is mostly aesthethics but the interesting bits are these:

[css]

.draggable span,
.draggable small{
display:none;
}

[/css]

We hide the span and small elements so that they will only display at drag and drop. You also need to define certain classes to be applied when certain events are triggered:

[css]

.dragactive{
background-color: #ffcccc;
border: 1px dashed #e5a8a8;
}
.drophover{
background-color: #d5eca6;
border: 1px dotted #c7dd9b;
}
.drophighlight{
background-color: #cae9ec;
border: 1px solid #b9d5d8;
}

[/css]

The .dragactive class will be applied to the target area once you have started dragging an item, whereas .drophover will be applied to the target area once you have roll the item over the target. Finally, .drophighlight will be applied to target when you drop the item inside it.

jQuery UI

Besides the jQuery library, you need to include some scripts from jQuery UI components. You can configure your jQuery UI download including only UI Core and Draggable/Droppable from Interactions. For this example I’m using jQuery 1.3.2 + jQuery UI 1.7.2.

Include the proper scripts at header:

[js]
http://jquery-1.3.2.min.js
http://ui.core.js
http://ui.draggable.js
http://ui.droppable.js
[/js]

Now we will build our script, by defining  an interaction for .draggable class and one for .droppable class. The first hidden object will be revealed on the draggable interaction:

[js]
$(".draggable").draggable({
revert: true,
opacity: .75,
containment: ‘.container’,
cursor: ‘move’,
cursorAt: { top: 35, left: 45 },
helper: function(event) {
return $(‘<div>’ + $(this).children("small").text() + ‘</div>’);
},
drag: function(event, ui) {
$(‘.droppable’).removeClass(‘drophighlight’)
.find(‘p’)
.html(‘Drop it!<br/>Right here, right now.’);
}
});
[/js]

Let’s see each option in detail

[js]revert: true[/js]

will return the object that is being dragged back to its original position. That object is named helper and we will define it later. Next, we set the opacity of the dragged object down to .75

[js]opacity: .75[/js]

The next option defines the boundaries of our app

[js]containment: ‘.container’,[/js]

Now we define a cursor type and its position relative to the dragged item

[js]
cursor: ‘move’,
cursorAt: { top: 35, left: 45 },
[/js]

The helper option is bounded to a function looking for a small element within the current element. If found, it will be displayed when we drag the object. When dropped, it will be reverted to its original position and hidden

[js]

helper: function(event) {
return $(‘<div>’ + $(this).children("small").text() + ‘</div>’);
},

[js]</pre>
Finally, the last option is a function invoked when we start dragging the element. With its help, we will clear the text that might be on the target area after the user dropped an object and remove the .drophighlight class that was applied on that event

[js]

drag: function(event, ui) {
$(‘.droppable’).removeClass(‘drophighlight’)
.find(‘p’)
.html(‘Drop it!<br/>Right here, right now.’);
}

[/js]

The second object will be displayed after we drop it on the target area. Let’s configure its interaction:

[js]

$(".droppable").droppable({
activeClass: ‘dragactive’,
hoverClass: ‘drophover’,
drop: function(event, ui) {
$(this).addClass(‘drophighlight’)
.find(‘p’)
.html(‘<h2>Your result:</h2> <br/> ‘ + ui.draggable.children("span").text() + ‘!’);
}
});

[/js]

The first two options define the classes to be applied during the drag action and when the dragged object is on top of the target. The third option defines a funcion triggered when the object is droppped correctly on the target. It will apply the .drophighlight class to the target area and set a message according to the value stored in the span element of the draggable object.

So that’s pretty much it. You can find more attributes of these interactions on the jQuery documentation for Draggable and Droppable and you can download the example below for close inspection.