---
description: How to setup Selectable
---

# Set Up

***

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

```javascript
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`](../api/options/filter) option utilising a CSS3 selector string:

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

***

If you only want items within a certain container to be selectable then utilise the [`container`](../api/options/container) option:

```javascript
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:

```javascript
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`](../api/options/container) option.

The problem is that the event listeners for an instance (`mousedown` / `touchstart` and `mouseup` / `touchend`) are attached to the [`container`](../api/options/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` and`end`events for each instance defined with `on()` will fire at same time.

By defining a unique container for each instance with [`container`](../api/options/container), the event listeners are instead attached to that container and will prevent conflicting with other instances.

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

```javascript
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`](../api/options/container) option:

```javascript
// 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`](../api/options/container) option, then you can retrieve it with `document.body._selectable`.
