[jQuery UI] 基本メモ: Selectable – 端くれプログラマの備忘録

サンプルコード

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

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

</ul>

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

1	$('#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);
    }
})

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/

サンプルコード

参考サイト

関連記事