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

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?

jqueryjquery-uidraggabledroppablejquery-data


Solution 1:[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:[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:[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.

Solution 4:[4]

I use Modernizr:

if (Modernizr.draganddrop) {
// use drag and drop
}

Solution 5:[5]

Just check for the classes added by jQuery.

if ($(this).hasClass('ui-droppable')) {
  // Is Droppable
} else {
  // Nope
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 zzzzBov
Solution 4 Vasyl Gutnyk
Solution 5 David Merritt

Related Questions