jQuery Selectable - deselect single element by clicking - is this possible?

Question

I would like to be able to deselect a selected item by clicking or using lasso, just like in Photoshop where I keep another key down to "deselect" parts of an existing selection.

Is this possible?

As I understand "jQuery UI selectable". There is only "single click" with or without CTRL to add multiple and then the quick lasso.

I am trying to see how it would be possible to deselect, one or two elements of a whole selection by clicking them off again.

Eg, you drag the lasso and get 30 elements but finds that 1 does not need to be part of this selection. You click it and deselects it.

So something that reacts to the existing selection and removes the choosen element.

Or with the lasso, you make a lasso selection. Gets 30 elements. Then you draw a new lasso, this time starting on an already selected element, now it default deselects and so does the rest of the group marked.

I believe this should be customizable behaviour for the jQueryUI if anything.

But is the "single deselect" possible with a simple jQuery hack or will it demand a lot of code?

Answer 1

It seems that I can and will need to modify Selectable to do this myself.

I have found this example by Nicolas Rudas (?): http://nicolas.rudas.info/jquery/selectables_sortables/

$(function() {
        $("#selectable")
            .selectable({
                autoRefresh: false,
                stop: function(e,ui){
                    $(this).selectable( 'refresh');
                },
                noConflict : false
            })
            .sortable({
                opacity:'0.5',
                cursor: 'move',
                zIndex: 5,
                helper : 'clone',
                forcePlaceholderSize : true,
                stop : function(){
                    $("#selectable").selectable( 'refresh');
                }
            })


        $('#noConflict').toggle(function() {
            $(this).text('Disable \'noCoflict\'');
            $("#selectable").selectable('option','noConflict',true).selectable( 'refresh');
        },
        function() {
            $(this).text('Enable \'noCoflict\'');
            $("#selectable").selectable('option','noConflict',false).selectable( 'refresh');


        });

    });

He shows how he has enabled the feature we were looking for. He also describes some problems which he solves too. I will have a more thorough look into his code myself now.

I am therefore closing this question.