Tuesday, October 4, 2011

Jquery UI Sortable Helper option

Jquery UI's sortable and droppable http://jqueryui.com/demos/sortable/#portlets is great for a modular page system.

When you move modules around you see the content of each and they retain the size they had before you 'picked them up'. Sometimes you want to have a replacement draggable object instead of the original.

For this, the Sortable plugin has a 'helper' option, the example uses the value 'clone' for it, but if you want to use a different item you need to give it a function that returns a jquery object from the DOM:

$("#columncontent1, #columncontent2").sortable({
helper: function() {
return $('#draganddrophelper');
}
});


alternatively you can create a new one inside the function:

$("#columncontent1, #columncontent2").sortable({
helper: function() {
return $('<div id="dragdrophelper" style="height: 90px;"></div>');
}
});