jQuery UI Selectable

jQuery UI Selectable lets users select one or more child elements with the pointer. A lasso can cover multiple items, and Ctrl/Cmd-assisted selection can be used depending on platform/browser behavior.

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Basic Selectable Top ↑

$( function () {
    $( "#my_selectable" ).selectable();
});

<ul id="my_selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Selectable Options Top ↑

appendTo

Controls where the lasso helper is appended.

$( "#my_selectable" ).selectable({
    appendTo: "body"
});

Read the current option:

const value =
    $( "#my_selectable" ).selectable( "option", "appendTo" );

Set the option after initialization:

$( "#my_selectable" ).selectable(
    "option",
    "appendTo",
    "body"
);

Open demo →

autoRefresh

When true, Selectable recalculates selectable-item positions at the start of each selection operation.

$( "#my_selectable" ).selectable({
    autoRefresh: false
});

Read the current option:

const value =
    $( "#my_selectable" ).selectable( "option", "autoRefresh" );

Set the option after initialization:

$( "#my_selectable" ).selectable(
    "option",
    "autoRefresh",
    false
);

Open demo →

cancel

Prevents selection from starting on matching elements.

$( "#my_selectable" ).selectable({
    cancel: "a, .no-select"
});

Read the current option:

const value =
    $( "#my_selectable" ).selectable( "option", "cancel" );

Set the option after initialization:

$( "#my_selectable" ).selectable(
    "option",
    "cancel",
    "a, .no-select"
);

Open demo →

Open demo →

classes

Adds custom classes to Selectable structural elements.

$( "#my_selectable" ).selectable({
    classes: { "ui-selectable": "highlight" }
});

Read the current option:

const value =
    $( "#my_selectable" ).selectable( "option", "classes" );

Set the option after initialization:

$( "#my_selectable" ).selectable(
    "option",
    "classes",
    { "ui-selectable": "highlight" }
);

Open demo →

delay

Historically delayed the start of selecting after pointer-down.

$( "#my_selectable" ).selectable({
    delay: 150
});

Read the current option:

const value =
    $( "#my_selectable" ).selectable( "option", "delay" );

Set the option after initialization:

$( "#my_selectable" ).selectable(
    "option",
    "delay",
    150
);

disabled

Disables Selectable when set to true.

$( "#my_selectable" ).selectable({
    disabled: true
});

Read the current option:

const value =
    $( "#my_selectable" ).selectable( "option", "disabled" );

Set the option after initialization:

$( "#my_selectable" ).selectable(
    "option",
    "disabled",
    true
);

Open demo →

distance

Historically required the pointer to move a minimum number of pixels before selection began.

$( "#my_selectable" ).selectable({
    distance: 20
});

Read the current option:

const value =
    $( "#my_selectable" ).selectable( "option", "distance" );

Set the option after initialization:

$( "#my_selectable" ).selectable(
    "option",
    "distance",
    20
);

filter

Limits which child elements can become selectable items.

$( "#my_selectable" ).selectable({
    filter: "li"
});

Read the current option:

const value =
    $( "#my_selectable" ).selectable( "option", "filter" );

Set the option after initialization:

$( "#my_selectable" ).selectable(
    "option",
    "filter",
    "li"
);

Open demo →

tolerance

Controls lasso intersection behavior: touch or fit.

$( "#my_selectable" ).selectable({
    tolerance: "fit"
});

Read the current option:

const value =
    $( "#my_selectable" ).selectable( "option", "tolerance" );

Set the option after initialization:

$( "#my_selectable" ).selectable(
    "option",
    "tolerance",
    "fit"
);

Open demo →

Selectable Methods Top ↑

destroy()

Remove Selectable behavior completely.

$( "#my_selectable" ).selectable( "destroy" );

Open demo →

disable()

Disable selection temporarily.

$( "#my_selectable" ).selectable( "disable" );

Open demo →

enable()

Re-enable selection.

$( "#my_selectable" ).selectable( "enable" );

Open demo →

instance()

Return the Selectable widget instance.

$( "#my_selectable" ).selectable( "instance" );

option()

Read or set Selectable options.

const options = $( "#my_selectable" ).selectable( "option" );

Open demo →

refresh()

Recalculate selectee positions after the selectable children change.

$( "#my_selectable" ).selectable( "refresh" );

widget()

Return the jQuery object for the Selectable widget element.

$( "#my_selectable" ).selectable( "widget" );

Selectable Events Top ↑

create

Fires when Selectable is initialized.

$( "#my_selectable" ).selectable({
    create: function ( event, ui ) {
        console.log( "create" );
    }
});

Open demo →

selected

Fires after an item becomes selected.

$( "#my_selectable" ).selectable({
    selected: function ( event, ui ) {
        console.log( "selected" );
    }
});

The selected item is available as ui.selected.

Open demo →

selecting

Fires while an item is in the process of becoming selected.

$( "#my_selectable" ).selectable({
    selecting: function ( event, ui ) {
        console.log( "selecting" );
    }
});

Open demo →

start

Fires when a selection operation starts.

$( "#my_selectable" ).selectable({
    start: function ( event, ui ) {
        console.log( "start" );
    }
});

Open demo →

stop

Fires when the selection operation ends.

$( "#my_selectable" ).selectable({
    stop: function ( event, ui ) {
        console.log( "stop" );
    }
});

Open demo →

unselected

Fires after a previously selected item becomes unselected.

$( "#my_selectable" ).selectable({
    unselected: function ( event, ui ) {
        console.log( "unselected" );
    }
});

Open demo →

unselecting

Fires while an item is being unselected.

$( "#my_selectable" ).selectable({
    unselecting: function ( event, ui ) {
        console.log( "unselecting" );
    }
});

Open demo →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: