サンプルコード
|
1 2 3 4 5 |
<style> .ui-selected { background: red; } </style> |
|
1 2 3 4 5 |
<ul id="selectable"> <li id="item-1">item1</li> <li id="item-2">item2</li> <li id="item-3">item3</li> </ul> |
|
1 |
$('#selectable').selectable(); |
イベントを使って選択状態の変化をトレースする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var selected = new Array(); $('#selectable').selectable({ selected: function(event, ui) { if (selected.indexOf(ui.selected.id) === -1) { selected.push(ui.selected.id); } console.log(selected); }, unselected: function(event, ui) { var id = ui.unselected.id; selected.splice(selected.indexOf(id),1); console.log(selected); } }) |
参考サイト
Selectable | jQuery UI
https://jqueryui.com/selectable/