jQuery UI selectable - How to unselect element by dragging a box (lasso)?

jQuery UI selectable - How to unselect element by dragging a box (lasso)?

It's my very first time trying to select items by dragging a box(lasso). Now I can select elements by dragging a box and also unselect them when clicking the element one by one. I think that's a little bit annoyed when you have too many elements to unselect. So my question is how to unselect the selected elements by dragging a box not only by click it?

Here's my
JSFiddle or you can also check the code below:

HTML part:
  1. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body> <ol id="selectable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="ui-state-default">3</li> <li class="ui-state-default">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li> </ol> </body>

CSS part:

  1. #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
    #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }

JS part:

  1. $(function(){
        $("#selectable").bind("mousedown", function(e){
            e.metaKey = true;
        }).selectable();
    });