js-query – drag&drop

In general I tend to either create my own code or use MooTools for my javascript needs and effects.
However, for a recent project I had to use jquery as the rest of the site had been developed using this.
All that was needed was a simple “drag & drop” script so as to be able to drop a maximum 1 product to the cart.
I needed to do the following:

1. Drag elements from box1 to box2
2. Limit box2 to only accept 1 item
3. Show the item that I have dropped (in my case an image)
4. Save the id of the item to a hidden text field
5. If the user wants to change the item they would have to drag it back to the original box1 (I would have liked to have been able to do a “hotswap” but that just wasn’t going to happen (yet)
   On dragging out, the hidden text field value gets reset to “0”

Relativly simple stuff I would have thought but, could I find any useful guidelines or tutorials on the jquery website? – no! –  just a few lines about disabling and enabling the drop box (OK, I would need that)
My doubts after having read the docs on jsquery site:

1. How to get dropped element id?
2. How to show the element in the dropbox?

So, after much (and I mean a lot) of googleing, I finally botched together a solution taking bits from forums, external tutorials and other script examples.
The reason that I am writing this is because in the end it is actually pretty simple, that is why I don’t understand why it isn’t clearly documented in the “drop” section of the jsquery website.

In case you come up against the same problem and stumble upon this post, here is what I did:
You will need to include the following scripts apart from the latest jquery.js file:
ui.base.js
ui.draggable.js
ui.droppable.js
now don’t ask me where the official files are as I have been unable to find them, I went the the droppable demo and got them via the source code – again, where are the download links in jquery???

and here is the final code:

<script type="text/javascript">
$(document).ready(function(){
// define draggable elements
$(".products").draggable({helper: 'clone'});

// cart
$(“#cart”).droppable({
accept: “.products”,
activeClass: ‘droppable-active’,
hoverClass: ‘droppable-hover’,
drop: function(ev, ui) {

var theId = $(“.products”).attr(“id”); // get id of gift
var numericIdSource = theId.replace(/[^0-9]/gi,”)/1; // Find numeric id of source (mine has “gift_” before it in the id to avoid confusion with other doc elements)
document.getElementById(‘id_gift’).value=numericIdSource; // add dropped id_gift to hidden field for form posting
$(this).append(ui.draggable); // add item to cart
$(this).droppable(“disable”); // only 1 item allowed
}
});
// shop – for removing gifts
$(“#shop”).droppable({
accept: “.products”,
activeClass: ‘droppable-active’,
hoverClass: ‘droppable-hover’,
drop: function(ev, ui) {
document.getElementById(‘id_gift’).value=””; // empty hidden field value
$(this).append(ui.draggable); // add item to shop
$(“#cart”).droppable(“enable”); // make cart droppable
}
});
});

</script>

and the html:
<div id="cart" class="cart">&nbsp;</div>
<div id="shop">
<div id="item_1" class="products"><img src="image_1.jpg" width="75" height="75"></div>
<div id="item_2" class="products"><img src="image_2.jpg" width="75" height="75"></div>
<div id="item_3" class="products"><img src="image_3.jpg" width="75" height="75"></div>
<div id="item_4" class="products"><img src="image_4.jpg" width="75" height="75"></div>
</div>

So, there you go, actually pretty simple, and any experienced jsquery coder I am sure would say that it was pretty obvious, but I’m not and it isn’t 😉

I hope that you find it useful.