CODEWITHSUNDEEP
jqueryjquery-ui
Dima
Dima

Reputation: 4128

JQuery UI Selectable - how to customize its behavior

I want to ensure the following very primitive behavior for selectable:

  1. disable lasso selection completely, only toggle whatever touched (clicked on)
  2. do exactly what is done when Ctrl is pressed—e.g. deselect selected and select unselected item and free users from holding Ctrl key.

I am trying to build sort of a basket—when it opens up its content is displayed and some items are highlighted. Then user either selects more or deselect others, submits the form. That's all.

I fought with Selectable for quite some time and its a very smart piece of script, but I seem to be unable to achieve this basic requirements. When form is shown users need to hold the Ctrl key, otherwise already selected items get lost.

Upvotes: 4

Views: 3201

Answers (2)

TomWolk
TomWolk

Reputation: 987

It is easiert to not use selectable at all:

$('ul > li').click(function() {
  $(this).toggleClass('ui-state-highlight');
});

Upvotes: 4

andyb
andyb

Reputation: 43823

I answered something similar the other day that I think solves part 1 of your problem - How to select multiple items using mouse click?. This allows left click or lasso to select/deselect without the need for the Ctrl key.

However, looking over the demo, I created for that question, by adding

tolerance: 'fit'

to the selectable, it seems to disable selection via lasso which I think solves part 2 of your question.

Lastly, if you use a jQueryUI theme, you will also need to override the lasso style. The relevant theme rule is:

.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }

and something like

.ui-selectable-helper { display:none }

should do it.

Updated demo

Upvotes: 3

Related Questions