Drag and Drop with jQuery and CakePHP

Recently I had a need for a data report with shopping cart-like behavior — let the user paginate through a list of items, drag items of interest to a “basket” and then take action on all items in the basket.

To do this, I used the “draggable” and “droppable” functionality in jQuery UI. jQuery makes drag and drop (and everything else) ridiculously easy.

The only trick here was managing the “basket” contents with CakePHP.

My data was laid out in a table, so I took the item name and wrapped it in a div with a ‘draggable’ class like this:

<div class="draggable"><?php echo $item['Item']['name']; ?></div>

Then at the top of the page, I created my “basket” — just a stylized div with a “droppable” class or id, like so:

<div id="basket" class="droppable">Drag items of interest here.</div>

Then in the document ready function, just initialize the drag and drop:

$('.draggable').draggable({ revert: 'valid'; });
$('#droppable').droppable({
     accept: '.draggable',
     hoverClass: 'draggable-active',
     drop: function(event, ui) { doSomeFunction(ui.draggable); }
});