Question

当你点击一个包含ctrl的选定元素时，它将被取消选择。
元素“抓住”了套索（选择矩形）但是，在按住ctrl的同时，会将其添加到选择中。（而不是人们可能期望的XOR模式）

现在，如果您希望1.发生，但不小心移动鼠标，将创建一个套索，并且2.发生 - 净效果：没有。这很刺激，特别是当可选元素相当大且gui没有完全响应时。

我可以想象两种避免这种情况的方法，即

提到的XOR模式
套索开始前的最小距离

我对任何方法（也是新方法）持开放态度，只要它附带一个实现。

Answer 1

您可以使用可选项的delay和distance选项，以避免因不必要的小鼠移动而触发选择。

<强>延迟：

定义何时开始选择的时间（以毫秒为单位）。这有助于在单击元素时防止不必要的选择。

<强>距离：

选择时的容差（以像素为单位）应该开始。如果指定，则在拖动鼠标超出指定距离之前不会开始选择。

例如：

＆＃13;

$("#selectable").selectable({
  delay: 30,
  distance: 30
});

＆＃13;

#selectable {
  list-style: none;
}
#selectable li {
  width: 100px;
  height: 30px;
}
#selectable .ui-selectee {
  background: #ccc;
}
#selectable .ui-selecting {
  background: dodgerblue;
}
#selectable .ui-selected {
  background: royalblue;
}

＆＃13;

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

＆＃13;

JQuery UI Selectable - 延迟套索（选择矩形）

1 个答案: