Does abybody know how to unselect Jquery Selectable by clicking outside selected object?

Question

As in the title. I see that jquery dont have this option included, anyone know how to write it by ourself? But within some area?

Like, i have active area of dropped images, that i can select. But i want them deselect, when clicking inside that area, but not when clicked other divs.

if you need try to imagine photoshop interface. Something like that. You can click the interface but clicking inside empty place inside canvas window (area of images) its deselecting.

Answer 1

Since an element with the class ui-selected is what makes an item selected you can simply remove it to deselect.

$(document).click(function(event) {
    if (!$(event.target).is("#selectable")) {
        $('#selectable .ui-selected').removeClass('ui-selected')
    }
});

Answer 2

jQuery($ => {
  $("#selectable").selectable();

  $("#area").on("click", (evt) => {
    $("#selectable").find(".ui-selected").removeClass('ui-selected')
  });
});

/*QuickReset*/ * {margin: 0; box-sizing: border-box;}

#area {
  height: 100vh;
}

#selectable .ui-selected {
  background: red;
}

<div id="area">
  <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>
    <li class="ui-widget-content">Item 7</li>
  </ol>
</div>

<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>