jQuery UI selectable widget multiple unselect with mouse drag

Question

I am using jQuery UI selectable widget. I saw a solution at Is there a way to change event parameters in jQuery? to enable multiple selection (with mouse drag) which works fine. Now I am trying to get the similar feature to unselect multiple elements which doesn't work.

$('#selectlist').on("mousedown", function (e) {
    e.metaKey = true; //multiple select true
    //e.ctrlKey = true;
}).selectable({
    filter: '.select-li',
    selecting: function (event, ui) {
        debugger;
        //if ($(ui.selecting).hasClass('li-planned')) {
        //    $(ui.selecting).removeClass("ui-selecting");
        //}
    },
    unselecting: function (event, ui) {
        //if ($(ui.unselecting).hasClass('li-planned')) {
        //    $(ui.unselecting).removeClass("ui-unselecting").addClass('ui-selected');
        //}
    },
    stop: function (event) {
        //debugger;
        //do some work here
    }
})

I tried multiple options to achieve but so far I am not able to get it. Any help will be appreciated.

Answer 1

$(function() {
  $("#selectable").bind("mousedown", function(e) {
    e.metaKey = true;
  }).selectable();
  $("#selectable").selectable({
    selected: function(event, ui) {
      if (!$(ui.selected).hasClass('selected-flag')) {
        $(ui.selected).addClass('selected-flag');
      } else {
        $(ui.selected).removeClass("ui-selected selected-flag");
      }
    }
  });
});

#feedback {
  font-size: 1.4em;
}
#selectable .ui-selecting {
  background: #FECA40;
}
#selectable .ui-selected {
  background: #F39814;
  color: white;
}
#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}
#selectable li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all">
<script src="https://code.jquery.com/ui/1.8.5/jquery-ui.min.js"></script>

<div class="demo">
  <ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
  </ol>

</div>

I've created a solution here and also added snippet in my answer. Here I've added a flag class to elements on select event to identify later which items were selected and then remove both ui-selected and flag class from them, which then make it unselected. I think that's what you're looking for.

Answer 2

You can simply make your list selectable by

 $( "#selectlist" ).selectable();

You can multiple select on selectables without using your mouse down.

1. Mouse drag
2. Pressing Ctrl while selecting.

On unselecting multiple (based on selecting above),

1.a. Select one, and all the others will unselect
1.b. Select an empty area in you list (ei. space between list1 and list2), and all will unselect
2. Pressing Ctrl while unselecting.

See jQuery-ui's demo http://jqueryui.com/selectable/#default

Answer 3

I think Aminur answered your question based on the information given. That's probably what I would have thought you were after before before reading your feedback under his answer.

Here is another proposal. This proposal basically clears all the selected items if a user starts to drag on an already selected item. Maybe this is what you are after when you say you are looking to deselect multiple elements.

$(function() {
  $("#selectable").bind("mousedown", function(e) {
    if(e.target.className.indexOf('ui-selected') === -1){
        e.metaKey = true;
    }
  }).selectable();
});

Fiddle