jquery-ui-selectable

So okay. Let's say i have the following snippet: <div id="container"> <div class="content" >A</div> <div class="content" >B</div> <div class="content" >C</div> <div class="content" >D</div> <div class="content" >E</div> <div class="content" >F</div> </div> Now, let's say I have performed: $('.content').selectable( {} ); My dilemma: Say, any time I am dragging and thus the lasso tool appears, I only want 4 divs to be selected - I can still extend the lasso after I have selected 4 but the succeeding divs that the lasso hovers over should not be selected. So say the looks of the divs is from left

I was wondering if there is an option on the jQuery UI Selectable that will let me disable the Ctrl +Click, but still keep the draggable for the multiple selection. On my project I want to be able for people to select multiples, but only by dragging, not by Ctrl +clicking. If there isn't, does anyone know a way I can achieve this? Any information would be really helpful! :) Thanks!!! EvilAmarant7x Selectable uses the metaKey flag to do multi-select, so you can bind metaKey to be false on the mousedown before calling selectable. Then Ctrl +click will always be off. Make sure to bind before

Does anyone know if there's a way to configure a jquery ui selectable element to unselect the selected element when you click it? Sort of like a toggle. If it's already selected, unselect it, otherwise do the default behavior. Thanks. i'm very late in responding to your question, but let me just answer it anyway so that to keep it as a reference for others. $( ".selector" ).bind( "mousedown", function ( e ) { e.metaKey = true; } ).selectable(); this will allow the toggle behavior that you're looking for. Well here's what I just ended up doing. I used a class name to toggle selecting and

Problem is: In nested jQuery Ui selectable, selecting top most child of context means when I click on Item 1 it select Item 1, but when I click on Item 111 or 1111 it select until Item 2 while I need only the element on which focus is, not it's parent until mouse focus on that. Please keep in mind that there might be any pure html just not limited to ul, li, it is for illustrative purpose only. <ul id="selectable"> <li>Item 1</li> <li>Item 2 <ul > <li>Item 11 <ul > <li>Item 111</li> <li>Item 112</li> <li>Item 113</li> <li>Item 114 <ul > <li>Item 1111</li> <li>Item 1112</li> <li>Item 1113</li>

I want to be able to change the parameters that are being passed into the selectable's start event, so I can basically allow my user to use the selectable jQuery UI effect without having to hold down the CTRL key. JS $(function() { $( "#selectable" ).bind("mousedown", function(event, ui) { var result = $( "#select-result" ).empty(); event.metaKey = event.ctrlKey = true; }); $( "#selectable" ).selectable(); }); I have a fiddle with what I'm trying to accomplish here: http://jsfiddle.net/josephbulger/ZfevM/ The problem I'm having, is that when i set the event's parameters in the start method,

can anyone help me use the jquery ui selectable library to perform the following functions: Allow a user to select multiple items with a mouse click De-select an item if it is already selected with a mouse click Eric Skiff This is worked around in another question , but I'm reposting here for anyone who finds this via google. If you bind the "mousedown" event in jQuery and set metaKey there (as if the user is holding the ctrl/cmd key), then when you call selectable, it will already be set. $(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) { e.metaKey = true; }).selectable(); timbroder

Does anybody know how to combine jQuery UI selectable and sortable ? This script: http://nicolas.rudas.info/jquery/selectables_sortables/ doesn't work in Chrome and it also has plugin modifications. Just found this very easy solution from rdworth : CSS: ul { width: 300px; list-style: none; margin: 0; padding: 0; } li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; } li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; } .ui-selecting { background: #eee; } .ui-selecting