appendTo
Type String|Object
Default document.body
Defines the container to append the lasso to.
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.
Heads Up!
If you have multiple instances and don't define a container with the appendTo
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.
The container can be updated dynamically with the setContainer()
method.
new Selectable({
appendTo: "#container"
});
// or
new Selectable({
appendTo: document.getElementById("container")
});