Set Up

How to setup Selectable

---

Creating an Instance

This will create a new instance and add any element found in the DOM with the 'ui-selectable' class name and make them selectable.

const selectable = new Selectable();

---

Defining Selectable Items

If you don't add the 'ui-selectable' class name to your items then simply tell the instance what to look for instead with the filter option utilising a CSS3 selector string:

const selectable = new Selectable({
   filter: ".my-classname"
});

---

If you only want items within a certain container to be selectable then utilise the container option:

const myList = document.getElementById('list');
const selectable = new Selectable({
    container: myList
});

// or using a CSS3 selector string

const selectable = new Selectable({
    container: '#list'
});

This also confines the lasso within the defined container.

---

Adding Items

If your document doesn't have any selectable items yet, e.g. they're added asynchronously via an ajax call, then simply create a new instance as normal, then use the add() method when they're available:

const myList = document.getElementById('list');
const selectable = new Selectable({
    container: myList
});

// Create some new items
const frag = document.createDocumentFragment();
for ( let i = 0; i < 10; i++ ) {
    const item = document.createElement('div');
    item.classList.add('box');
    item.textContent = `Box ${i}`;

    frag.appendChild(item);
}

// Append them to the myList
myList.appendChild(frag);

// add the newly created items to the instance so they're selectable
selectable.add(myList.children);

---

Multiple Instances

It's important to note that multiple instances of Selectable on one page can conflict with each other if no container is defined with the container option.

The problem is that the event listeners for an instance (mousedown / touchstart and mouseup / touchend) are attached to the container element. If you have more than one instance and don't define a container, it defaults to document.body so for example you'll have multiple mousedown event listeners attached to document.body and they'll all fire at the same time and hence all start andendevents for each instance defined with on() will fire at same time.

By defining a unique container for each instance with container, the event listeners are instead attached to that container and will prevent conflicting with other instances.

<div id="list1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

<div id="list2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");

const selectable1 = new Selectable({
    container: list1,
    filter: list1.children
});

const selectable2 = new Selectable({
    container: list2,
    filter: list2.children
});

Retrieving an Instance

If you didn't attach the instance to a variable then you can retrieve it by accessing the _selectable property on the element defined by the container option:

// Define the container
const myList = document.getElementById("list");

// Instantiate
new Selectable({
    container: myList
});

// Retrieve the instance from the container
const selectable = myList._selectable;

If you didn't define an element with the container option, then you can retrieve it with document.body._selectable.