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: nicolas.rudas.info/jquery/selectables_sortables — Peter Smeekens
– Peter Smeekens, Commented Mar 25, 2011 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
– wilsonpage, Commented Mar 26, 2011 at 9:55

wilsonpage · Accepted Answer · 2011-04-28 09:03:18Z

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, 2011 at 9:03

wilsonpage

17.7k23 gold badges106 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

acme Over a year ago

Do you mind spreading your solution? I'm having the same problem. Thanks!

prototype Over a year ago

Same issue, bummed to see they don't play well.

prototype Over a year ago

See stackoverflow.com/questions/705250/…

T J · Accepted Answer · 2016-07-12 07:40:33Z

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, 2016 at 7:40

T J

43.2k13 gold badges87 silver badges142 bronze badges

answered Aug 29, 2015 at 14:15

Maciej Kravchyk

17k8 gold badges72 silver badges83 bronze badges

Collectives™ on Stack Overflow

jQuery UI : Combining Selectable with Draggable

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related