使用鼠标选择单个元素或一组元素。

如需了解更多有关 selectable 交互的细节，请查看 API 文档 可选择小部件（Selectable Widget）。

默认功能

在某个 DOM 元素上或者一组元素上启用 selectable 功能。通过鼠标拖拽选择条目。按住 Ctrl 键，选择多个不相邻的条目。




  
  jQuery UI 选择（Selectable） - 默认功能
  
  
  
  
 
  
  


 

    
  
  1. Item 1
    2. 
  
  2. Item 2
    3. 
  
  3. Item 3
    4. 
  
  4. Item 4
    5. 
  
  5. Item 5
    6. 
  
  6. Item 6
    7. 
  
  7. Item 7
    8.

显示为网格

让 selectable 条目显示为网格，使用 CSS 使得它们带有相同的尺寸且浮动显示。




  
  jQuery UI 选择（Selectable） - 显示为网格
  
  
  
  
 
  
  


 

    
  
  1. 1
    2. 
  
  2. 2
    3. 
  
  3. 3
    4. 
  
  4. 4
    5. 
  
  5. 5
    6. 
  
  6. 6
    7. 
  
  7. 7
    8. 
  
  8. 8
    9. 
  
  9. 9
    10. 
  
  10. 10
    11. 
  
  11. 11
    12. 
  
  12. 12
    13.

序列化

写一个函数，在 stop 事件发生时触发，来收集被选中条目的索引值。呈现这些值作为反馈，或者以数据字符串形式进行传递。




  
  jQuery UI 选择（Selectable） - 序列化
  
  
  
  
 
  
  


 


您已经选择了： 无。


 

    
  
  1. Item 1
    2. 
  
  2. Item 2
    3. 
  
  3. Item 3
    4. 
  
  4. Item 4
    5. 
  
  5. Item 5
    6. 
  
  6. Item 6
    7.