container


Type: {String|Object}

Default: document.body


Defines the container where selection is allowed.


This option was previously known as appendTo.


You can pass either a CSS3 selector string or a node reference.

It's best to define the container as the closest ancestor to the items as possible and not have any other interactive elements (buttons, inputs, etc) within it as interacting with them will unselect the selectable items.

If you have multiple instances and don't define a container with the container option, any events you have attached to them will fire at the same time as they all share the same container (document.body). This can lead to other unwanted effects like deselection of all other instances items when clicking / tapping on the one instance.


Example

new Selectable({
    container: "#container"
});

// or

new Selectable({
    container: document.getElementById("container")
});

The container can be updated dynamically with the setContainer() method.

Last updated