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?

Why can't you use the original selector used when instantiating `droppable` or `draggable`? — zzzzBov, Nov 21 '11 at 19:02
@zzzzBov, my conrol is loaded using AJAX, so I don't know what happened on the document. — Kees C. Bakker, Nov 21 '11 at 20:48
please show some code. I have no idea what you're talking about. If you're sending some HTML via AJAX, then why does it matter whether the element is draggable or droppable? — zzzzBov, Nov 21 '11 at 21:17
@zzzzBov an example is very difficult to create. Basically, I have a page... my js is loaded (with ajax), it needs to find all draggables and droppables at that moment and post the number of elements back to the server for logging. — Kees C. Bakker, Nov 21 '11 at 21:21
and *why* do you need to log the number of draggables and droppables? — zzzzBov, Nov 21 '11 at 21:26
Because every draggable and droppable represents a certain object. The page needs to start logging the state at certain moments (or when objects are in a certain state) to determine the performance of the user. — Kees C. Bakker, Nov 21 '11 at 21:32

Carol Skelly · Accepted Answer · 2018-04-09T12:14:07.967

27

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

edited Apr 09 '18 at 12:14

answered Nov 21 '11 at 19:24

Carol Skelly

351,302
90
710
624

3

just make sure you don't actually write if/else statements without braces! – Evan Davis Nov 21 '11 at 19:57
So jQuery registers all their '~bles' in the `.data`? – Kees C. Bakker Nov 21 '11 at 20:47
Yes, jQuery uses data() for a lot of internal stuff - http://ejohn.org/apps/workshop/adv-talk/ - The CSS class checking is also viable, I'm not sure which would be better in your case, or from a performance standpoint. – Carol Skelly Nov 22 '11 at 15:19
7

Seems like its now called 'uiDraggable'. – chikamichi Feb 06 '13 at 05:49
6

In jQuery 2.1.0 it is called 'ui-draggable' – jbrain Feb 21 '14 at 17:18

humkins · Answer 2 · 2013-10-15T10:51:34.480

15

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.

edited Oct 15 '13 at 10:51

answered Apr 07 '13 at 20:03

humkins

9,635
11
57
75

score 7 · Answer 3 · answered Nov 21 '11 at 18:57

7

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.

answered Nov 21 '11 at 18:57

zzzzBov

174,988
54
320
367

What is better? Css class checking or checking in the `data`? And why? – Kees C. Bakker Nov 21 '11 at 20:50
That really depends on your implementation. It's very easy to remove a class, it's also easy to remove some data. I'm getting the feeling that this question is a symptom of using the wrong approach. – zzzzBov Nov 21 '11 at 21:25

score 0 · Answer 4 · answered Dec 04 '16 at 15:53

0

I use Modernizr:

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

answered Dec 04 '16 at 15:53

Vasyl Gutnyk

4,813
2
34
37

score 0 · Answer 5 · answered Mar 18 '22 at 09:51

0

Just check for the classes added by jQuery.

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

answered Mar 18 '22 at 09:51

David Merritt

1

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

5 Answers5