How to check if a jQuery UI plugin is attached to an element?

How can I check to see if a jQuery UI plugin is attached to an element? For example, if I load up the .sortable widget, how can its presence be determined?

The purpose behind this question is that I would like the ability to toggle .sortable on elements. With the ability to see that .sortable is present, I could then cal开发者_如何转开发l .sortable('destroy') to remove it.

All ui widgets attach their name as true to the element's container data. jqueryui also adds a data filter expression.

var $elem = $('div.sortable-container:data(sortable)');
if ($elem.length){
  // $elem contains list of elements that have sortable widget attached
}

Since jQuery UI 1.8, special selectors are being added to Sizzle for each widget. These are in the form of :ui-widgetname.

To check for the presence of a sortable widget on an element, you can therefore use:

if(element.is(':ui-sortable')) {
    element.sortable('destroy');
}

If anyone is looking for this solution in later jqueryUI versions, the data container's name of sortable plugin is now uiSortable and not sortable. Im using jQueryui 1.10

i.e to find elements u can use

var $elem = $('#sortable-container:data(uiSortable)');

and to find elements that are NOT yet initialized

var $elem = $('#sortable-container:not(:data(uiSortable))');

All UI widgets have are given the class ui-widget. Typically each widget also adds the widget class to the main element. In this case you should see ui-sortable added to the sortable container.

Just call an instance of sortable, if return undefined, then is not loaded

<pre>
if (typeof $("ul.sortable").sortable('instance') != 'undefined') {
    //$.ui.sortable is loaded and called
} else {
    //call sortable
}
</pre>