使用鼠标选择单个元素或一组元素。
依赖：
注释：jQuery UI 可选择（Selectable）插件允许通过鼠标拖拽选择元素（有时被称为一个套索）。可以在按住 ctrl/meta 键的同时单击或拖动来选择多个（不连续的）元素。
附加说明：该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
快速导航
选项
- appendTo：选择助手（套索）要被添加到哪一个元素。
- autoRefresh：该选项决定是否在每个选择操作的开始时更新（重新计算）每个选择项的位置和尺寸。如果您有多个项目，您可能要设置该选项为 false，并手动调用
refresh()方法。 - cancel：防止从匹配选择器的元素上开始选择。
- delay：鼠标按下后直到选择开始的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的选择。
- disabled：如果设置为
true，则禁用该 selectable。 - distance：鼠标按下后选择开始前必须移动的距离，以像素计。如果指定了该选项，选择只有在鼠标拖拽超出指定距离时才会开始。该选项可以防止点击在某个元素上时不必要的选择。
- filter：要制作选择项（可被选择的）的匹配的子元素。
- tolerance：指定用于测试套索是否选择一个项目的模式。可能的值：
"fit"：套索完全重叠在项目上。"touch"：套索重叠在项目上，任何比例皆可。
方法
- destroy()：完全移除 selectable 功能。这会把元素返回到它的预初始化状态。
- disable()：禁用 selectable。
- enable()：启用 selectable。
- option()：获取当前与指定的
optionName关联的值。 - refresh()：更新每个选择项元素的位置和尺寸。当
autoRefresh选项被设置为 false 时，该方法可用于手动重新计算每个选择项的位置和尺寸。 - widget()：返回一个包含 selectable 元素的
jQuery对象。
事件
- create( event, ui )：当 selectable 被创建时触发。
- selected( event, ui )：当每个元素被添加选择时，在选择操作结尾触发。
- selecting( event, ui )：当每个元素被添加选择时，在选择操作期间触发。
- start( event, ui )：在选择操作开头触发。
- stop( event, ui )：在选择操作结尾触发。
- unselected( event, ui )：当每个元素从选择中被移除时，在选择操作结尾触发。
- unselecting( event, ui )：当每个元素从选择中被移除时，在选择操作期间触发。
实例
一个简单的 jQuery UI 可选择小部件（Selectable Widget）。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>可选择小部件（Selectable Widget）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> #selectable .ui-selecting { background: #ccc; } #selectable .ui-selected { background: #999; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <ul id="selectable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <script> $( "#selectable" ).selectable(); </script> </body> </html>