I'm having a big problem trying to get my head round how the selectable() and draggable() ponents 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:
I'm having a big problem trying to get my head round how the selectable() and draggable() ponents 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./aguju4/3/edit
Share Improve this question asked Mar 25, 2011 at 9:46 wilsonpagewilsonpage 17.6k23 gold badges105 silver badges150 bronze badges 2- This may be of some help, but it doesn't seem to be working in Chrome: nicolas.rudas.info/jquery/selectables_sortables – 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 Commented Mar 26, 2011 at 9:55
2 Answers
Reset to default 4Decided 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.
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);