Tag Archives: sortable

jQuery Draggable, Droppable and Sortable User Interface not working in Internet Explorer 9 (IE 9) CodeUnit 18 APR 2011

I received a bit of a nasty shock when by sheer chance, one of the project managers updated their machines and got Internet Explorer 9 installed in the process, only to instantly come back to me and announce that the drag and drop features on our web project no longer worked – at all.

A quick look around, and indeed all the draggable, droppable and sortable interfaces that come with our use of the awesome jQuery and jQuery UI libraries were all of a sudden not working under IE 9. The other browsers, IE 8 included, still worked fine, but not this new beast of a browser.

Thankfully though, a quick look about on the jQuery UI support forums yielded the fact that a) this was indeed a bug that has long been identified, and b) that the bug fix ticket around it has since been resolved and closed.

See http://forum.jquery.com/topic/jquery-ui-does-not-work-on-ie9 .

So how do you sort out the problem then? Well if you can, you need to upgrade to the latest version of the jQuery UI library. The fix has now been in since version 1.8.6, so anything higher will resolve the issue.

And now for a big sigh of relief :)

Related Link: http://forum.jquery.com/topic/jquery-ui-does-not-work-on-ie9

jQuery: Remove Drag and Drop Action from Content Pane of Sortable Portlet Widgets CodeUnit 26 JAN 2011

jQueryUI’s awesome sortable functionality makes it a breeze to create sortable widget dashboards, allowing you to place little widget panes across a number of columns to your heart’s desire. However, the default is that the entire widget or portlet pane forms part of the sortable interface, making it quite a pain when you have something like a horizontal scrollbar on your widget!

Thankfully though, it turns out that it is quite simple to remove the default drag and drop events from certain sections of your widget by simply assigning their identifiers to the cancel option when declaring your sortable setup.

In code:

$(".widgetcolumn").sortable({
            cancel: ".widgetportlet-content"
});

The above basically excludes every element with the class widgetportlet-content from reacting to the drag and drop functionality of the sortable element, giving you more control over the content of your widgets without sacrificing the flexibility that the sortable plugin gives you!

Nifty.

Related Link: http://jqueryui.com/demos/sortable/#portlets