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:

            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

About Craig Lotter

Software developer, husband and dad to two young ladies. Writer behind An Exploring South African. I don't have time for myself any more.