abybody 是否知道如何通过单击所选对象外部来取消选择 Jquery Selectable？

问题描述

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

就像，我有放置图像的活动区域，我可以选择。但是我希望它们在该区域内单击时取消选择，而不是在单击其他 div 时取消选择。

如果您需要尝试想象photoshop界面。类似的东西。您可以单击界面，但单击画布窗口内的空白处（图像区域）取消选择。

解决方法

由于具有 ui-selected 类的元素使项目被选中，因此您可以简单地将其删除以取消选择。

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

,

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>