CODEWITHSUNDEEP
jqueryjquery-uidraggabledroppablejquery-data
Kees C. Bakker
Kees C. Bakker

Reputation: 33381

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?

Upvotes: 31

Views: 22566

Answers (5)

David Merritt
David Merritt

Reputation: 1

Just check for the classes added by jQuery.

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

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362380

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

Upvotes: 27

Vasyl Gutnyk
Vasyl Gutnyk

Reputation: 5039

I use Modernizr:

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

Upvotes: 0

humkins
humkins

Reputation: 10677

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.

Upvotes: 15

zzzzBov
zzzzBov

Reputation: 179046

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.

Upvotes: 7

Related Questions