有谁知道如何取消选择 Jquery Selectable by clicking outside selected object？

Question

如题。我看到 jquery 没有包含这个选项，谁知道如何自己写？但是在某个区域内？

比如，我有丢弃图像的活动区域，我可以 select。但是我希望他们 deselect，当点击那个区域时，而不是当点击其他 div 时。

如果你需要想象一下photoshop界面。像那样的东西。您可以单击该界面，但单击 canvas window（图像区域）内的空白处将其删除select。

Answer 1

由于具有 class ui-selected 的元素使项目被选中，您只需将其删除即可取消选择。

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

有谁知道如何取消选择 Jquery Selectable by clicking outside selected object？

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

javascript

jquery

user-interface

jquery-ui-selectable