[jQuery UI] 基本メモ: Selectable

サンプルコード

<style>
    .ui-selected {
    background: red;
}
</style>

<ul id="selectable">
    <li id="item-1">item1</li>
    <li id="item-2">item2</li>
    <li id="item-3">item3</li>
</ul>

$('#selectable').selectable();

イベントを使って選択状態の変化をトレースする。

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/