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:

            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!


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