JQuery UI可選 - 延遲套索（選擇矩形）

當你只需點擊一個選定的元素持有CTRL，它將被取消選擇。
然而，在按住ctrl的情況下，用套索（選擇矩形）捕捉的元素被添加到選擇中。（而不是人們可能期望的異或模式）

現在，如果您希望1.發生，但不小心將鼠標移動一點，套索將被創建，並且2.發生 - 淨效應：無。這是令人煩惱的，尤其是當可選元素相當大並且gui沒有完全響應時。JQuery UI可選 - 延遲套索（選擇矩形）

我能想象避免這種兩種方法，即

提及的XOR模式
套索之前的最小距離開始

我接受任何方法（也新一個），只要它帶有一個實現。

來源

2014-11-04 IARI

您可以使用delay和distance選項來避免通過不需要的小鼠標移動來觸發選擇。

延遲：

時間以毫秒爲單位來定義時選擇應該開始。這有助於防止在單擊某個元素時出現不需要的選擇。

距離：

公差，以像素爲單位，選擇應該開始時。如果指定，則只有在鼠標拖過指定距離後才能開始選擇。

例如：

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

#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; 
 
}

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

來源

2014-11-04 16:59:34

謝謝，我知道我以前見過的「距離」選項，但不知何故，我忽略了它5倍，在API的文檔。但隨着距離選項的簡單點擊選擇不再工作。 – IARI 2014-11-04 23:03:33

JQuery UI可選 - 延遲套索（選擇矩形）

回答

相關問題