How to check if an element is droppable, draggable or other 'ble'?

Question

I've got a bunch of elements with jQuery. Some are draggable, some are droppable and some are both. How can I detect if an element is draggable or droppable?

Solution 1

You could also use jQuery data() like this..

if ($(elem).data('draggable')) {
        alert("yes");
}
else {
        alert("no");
}

if ($(elem).data('fooable')) {
        alert("yes");
}
else {
        alert("no");
} 

See it here: http://bootply.com/60153

Solution 2

This works for me with JQuery 1.10.2

if ($("el").data('uiDraggable')){ //or uiDroppable
   alert("draggable")
} else {
   alert("not draggable")
}

Alternatively it is possible to invoke .data() method without argument

$("el").data()

That should print something like

Object {uiDraggable: $.(anonymous function).(anonymous function)}

where you can see object properties.

Solution 3

For draggable elements:

$(elem).is('.ui-draggable')

or you could filter, or just select $('.ui-draggable');.

For droppable, you would use .ui-droppable, resizable is .ui-resizable, selectable is .ui-selectable for the container although the items you select are .ui-selectee, sortable is .ui-sortable for the container.