Jquery Selectable without holding control

I use the Jquery Selectable But the user have to hold the control button down to select items is there anyway that user can select multiple items without holding control button down ?

in other words: I want the user to be able to Se开发者_Go百科lect any item by clicking on it and Unselect it by Clicking again.

You can use a set of custom event handlers to control how selection and deselection behave. With this set of handlers nothing is ever deselected unless it is selected and you click on it again without then doing a range select. If you remove the if (event.detail == 0) { and its related statements then range select will act like range invert -- anything in the range that is selected will be unselected, and vice-versa.

var _selectRange = false, _deselectQueue = [];
$(function() {
    $( "#selectable" ).selectable({
        selecting: function (event, ui) {
            if (event.detail == 0) {
                _selectRange = true;
                return true;
            }
            if ($(ui.selecting).hasClass('ui-selected')) {
                _deselectQueue.push(ui.selecting);
            }
        },
        unselecting: function (event, ui) {
            $(ui.unselecting).addClass('ui-selected');
        },
        stop: function () {
            if (!_selectRange) {
                $.each(_deselectQueue, function (ix, de) {
                    $(de)
                        .removeClass('ui-selecting')
                        .removeClass('ui-selected');
                });
            }
            _selectRange = false;
            _deselectQueue = [];
        }
    });
});

While it lasts, here's a jsfiddle example.

You can add the class "selected" when the user clicks the elements, and simply remove the class when clicked again.

$(".selectable").click(function(e) {
    $(this).toggleClass("selected");
});

You can also use the left mouse button and drag it down to select multiple items. But only adjacent items can be selected by this.

The easiest thing is to implement a jQuery click handler which toggles a selected class on your selectable elements. Then just style selected appropriately. jQuery Selectable is more hindrance than help in your case.