Events firing regardless of Selectable instance? about selectable

[nmeirik]

Thanks a lot, @Mobius1 for both the quick and extensive reply! Using the appendTo method did the trick. However, I must admit it's still not entirely clear to me based on the documented summary of this option ("Defines the container to append the lasso to.") why it's needed/useful in this case.

Also, I would never go specifically looking for the appendTo section of the documentation because it's not named in a way that appears relevant to my use case. Perhaps it might be worth referring to from https://mobius1.github.io/Selectable/getting-started.html#initialise as well?

[Mobius1]

The problem is that the event listeners for an instance (mousedown / touchstart and mouseup / touchend) are attached to the appendTo 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 selectable.start events defined with on() will fire at same time. It's unavoidable and hence the need to use appendTo when having multiple instances.

I'll update the docs to be more clear.

[Mobius1]

If you have multiple instances and don't define a container with the appendTo option, the event will fire for both instances as they both share the same container (document.body). It'll also cause deselection of all other instances when clicking / tapping on the one instance.

Make sure you use the appendTo option to define the container for your items. See appendTo for more info.

Try this with multiple instances:

Demo

HTML

<ul id="items1">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    ...
</ul>
<ul id="items2">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
	...
</ul>	

JS

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

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

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