jQuery UI : Combining Selectable with Draggable

Question

I'm having a big problem trying to get my head round how the selectable() and draggable() components of jqueryUI can work together.

They work fine on their own. I am trying to create a file browser type interface that users can select multiple files or drag INDIVIDUAL files to other droppable places in the app. I know a lot of people have been looking at ways to drag multiple files but this is not a requirement for me at the moment.

In the example provided selectable works if using the mouse drag marquee box but no longer works for simple mouse clicks or crl click to select multiple (when draggable is enabled).

EXAMPLE HERE: http://jsbin.com/aguju4/3/edit

This may be of some help, but it doesn't seem to be working in Chrome: http://nicolas.rudas.info/jquery/selectables_sortables/ — Peter Smeekens, Mar 25 '11 at 13:02
Decided to scrap the selectable plugin and build a basic version myself. The two don't seem to get on very well. I have based my own selectable solution on live() clicks so that it doesn't conflict with the draggable click events. — wilsonpage, Mar 26 '11 at 09:55

score 4 · Accepted Answer · answered Apr 28 '11 at 09:03

4

Decided to scrap the selectable plugin and build a basic version myself. The two don't seem to get on very well. I have based my own selectable solution on live() clicks so that it doesn't conflict with the draggable click events.

answered Apr 28 '11 at 09:03

wilsonpage

17,341
23
103
147

Do you mind spreading your solution? I'm having the same problem. Thanks! – acme Oct 10 '11 at 10:11
Same issue, bummed to see they don't play well. – prototype Jun 21 '12 at 03:28
2

See http://stackoverflow.com/questions/705250/is-there-a-jquery-plugin-which-combines-draggable-and-selectable – prototype Jun 21 '12 at 03:29

score 1 · Answer 2 · edited Jul 12 '16 at 07:40

1

You could have just use mousedown event to manually make the items selected.

var mouseDownCallback = function(e) {

    if (e.ctrlKey==0) $('#your-container').children().removeClass('ui-selected');

    $(this).addClass('ui-selected');

}
$('#your-container').on('mousedown','.item', mouseDownCallback);

edited Jul 12 '16 at 07:40

T J

42,762
13
83
138

answered Aug 29 '15 at 14:15

Maciej Krawczyk

14,825
5
55
67

jQuery UI : Combining Selectable with Draggable

2 Answers2

Linked