mobius1 / selectable

Touch enabled selectable plugin inspired by the jQuery UI widget.

Inspired by the jQuery UI Selectable plugin. Functionality and options are identical to the jQuery UI version with some additions and performance enhancements.

Selectable mimics the Windows file / directory behaviour, i.e. click and / or drag to select items, hold CTRL to select multiple or hold SHIFT to select consecutive groups of items.

• No dependencies
• Lightweight
• IE9+
• Touch enabled

Selectable is still in active development and therefore the API is in constant flux until v1.0.0. Check back regularly for any changes and make sure you have the latest version installed.

Pull requests are welcome!

Demo | Documentation | Changelog | Table Plugin

---

Other Demos

• 2d Transformed Elements
• Checkboxes
• Table Plugin (see Mobius1/Selectable-Table-Plugin)
• Advanced Usage

---

If this project helps you then you can grab me a coffee or beer to say thanks.

---

Copyright © 2017 Karl Saunders | BSD & MIT license

selectable's Issues

After Chrome update plugin doesn't work on touch devices.

Chrome v: 64.0.3282.140
On touch plugin throws an error
Uncaught TypeError: Failed to execute 'elementFromPoint' on 'Document': The provided double value is non-finite. at Selectable.end (selectable.js:705)

How are you using Selectable?

In order to improve the package I'd like to know how you are using Selectable as well as what you would like to see implemented or improved. Comments below.

Detect 2d Transformations on Elements

Allow lasso to correctly select elements that have 2d / 3d transformations applied, including:

• translate3d(), translateX(), translateY(), translateZ()
• rotate3d(), rotateX(), rotateY(), rotateZ()
• scaleX(), scaleY(), scale()
• transform-origin

IE error

This lib not working in Internet explorer 11. Can you please check it? The demo is broken as well.

It works with AngularJS?

Hi, i'm i really insterested into in use this gadget on a project but i need that it works on angular, when i try to do a ng-repeat Selectable stops to work. here an example:

whit ng-repeat: https://codepen.io/dev15/pen/MBQobQ?editors=1111

whitout: https://codepen.io/anon/pen/ejrBrJ?editors=1111

Selectable not being triggered.

Hi, The code was working previously. Suddenly, it stopped in December. Has the new version caused this issue?

The code is no longer triggered. No error in the console.

Here is my code:

 <div class="row">
          <div class="col-sm-3 text-center member ui-selectable " data-member="101">student 1</div>
          <div class="col-sm-3 text-center member ui-selectable " data-member="3">student 2</div>
          <div class="col-sm-3 text-center member ui-selectable " data-member="4">student 3</div>
          <div class="col-sm-3 text-center member ui-selectable " data-member="5">student 4</div>
</div>

<script src="http://localhost:8000/js/selectable.min.js"></script>
<script>
  const selectable = new Selectable({
    lasso: false,
    toggle: true
  });

  selectable.on("selectable.select", function (item) {
    console.log("Selected " + item.node.dataset.member);
    $.post('/attendance/select', {'date':"2018-12-22", 'member': item.node.dataset.member});
  });

  selectable.on("selectable.unselect", function (item) {
    console.log("Un-selected " + item.node.dataset.member);
    $.post('/attendance/unselect', {'date':"2018-12-22", 'member': item.node.dataset.member});
  });

</script>

selectAll(): save is not defined

When using the selectAll method, an error is thrown: save is not defined.

The last if-statement in the function is expecting a variable 'save', but is not passed as argument or created in the function.

Disable selecting on touch devices

Hello! @Mobius1 Could you please add some attribute to disable selecting elements
but leave the feature to select each item by clicking. It will be awesome!
I added it to my js file but it took a lot of time and I am not sure that I did correct.

• I disabled css attribute for class .ui-selectable touch-action
• And added some condition to _drag and _end functions.
• If it's touch device and if it dragged => then remove selecting items. Something like that

The main reason of that is having a convenient way to select items on touch device and scroll page as a normal page 💯

Thanks in advance! Love your package 👍

P.S. I read issues and understood that somebody needs to disable all features on touch device
maybe you can kill two rabbits at the same time :)

add disabled option

can it add the disabled option for each item? thanks

Lasso positioning issue when using transform

The Lasoo positioning gets the wrong items when I use transform (scale, translate, rotate, etc...) for the attached items.

Clicking in container but outside any item - throws an error

When you click with a shift in container but outside any item it throws with:

Here is how to reproduce:

Add auto-scrolling feature.

Add auto-scroll feature to scroll a container during drag.

Get selectable instance

1. How can i get the Selectable instance using class/filter (whatever was added during initiation)
So as we can get it even if it is defined in Function ?

2. And also if i call a function whenever i click a refresh button , the instances are getting generated constantly and cause the system to lag.There should be an option so that along with creating new instance each time the previous should be destroyed OR one instance option and it refreshes only.

function selectableInit(element,getInstance){
	const selectable = new Selectable({
		appendTo: '.fm-data',
		autoRefresh: true,
 		autoScroll: {
			threshold: 0,
			increment: 20,
		}, 
		classes: {
			lasso: "ui-lasso",
			selected: "ui-selected",
			container: "ui-container",
			selecting: "ui-selecting",
			selectable: "ui-selectable",
			unselecting: "ui-unselecting"
		},		
		filter: element,
		lasso:{
			border: '1px solid inherit',
			backgroundColor: 'rgba(52, 152, 219, 0.2)',
			zIndex: '1',
		},
		tolerance: 'touch'
	});
	
	if(getInstance == 'get'){
		return selectable.getSelectedNodes();
	}
};

3. The plugin should work for updating(dynamic) elements It should look for the class of how many elements so we have to initiate it only one time and it looks for elements , since there is an auto refresh option this should serve the purpose of re initiating/refreshing.

Thanks for the beautiful plugin

Single click on item selects item even i set toggle=false

When toggle is false then click should call item onClick only and not select this item.
Best regards
Karel

lasso with toggle on

Would it be possible to get a more natural behavior of lasso when toggle is on, specifically, toggle all the states of elements that are lasso'ed. currently lasso only selects regardless of the toggle flag.

Intercepts clicks on elements other than in "filter"

If you define "appendTo" element, Selectable intercepts (draws selection rectangle and prevents the event) all click events on all the descendants of the element, not only "filter" elements.

Usage example as ES6 module?

Hi @Mobius1 and thanks for the lib!

I wonder if ES6 style imports can be used with Selectable? Something like

import {Selectable} from 'selectable.js';

Help finding the IDs of elements selected ...

Hello, my code looks as follows and even though I am able to select the items properly, I am trying to create an array of the IDs of the items selected, but all I get is a blank {} curly brackets.

Here is the code I'm using:

<div id="row_P6CtxjdhyiEPOPxilMHf" class="files-item ui-selectable ui-selected">
</div>

var ids = $('div#showFiles.file-list.ui-selected').map(function() {
return $(this).attr('id');
});

alert(ids.length);
alert(ids[0]);

I get zero and then undefined in the output function

Best regards

Selection of multiple rows / columns is not working when selecting the rows / columns via clicking and dragging the header

Selection of multiple rows / columns is not working when selecting the rows / columns via clicking and dragging the header

Scrolling not re-enabled after destroying Selectable on touch devices

Demonstrated here:
https://jsbin.com/gacakorobo/edit?output

1. Open on a phone.
2. Scroll the #outer-div up and down — works fine.
3. Init selectable. Selecting works as expected.
4. Destroy selectable. Scrolling the #outer-div is no longer possible.

I tried to fix this by adding a namespace to all events in Selectable, but that did not work. Then I nulled this.events in the destroy() method and that worked:

destroy: function() {
    this.disable();
    this.listeners = false;
    this.clear();
    this.state("clear");
    this.remove(this.items);
    this.events = null;
},

Integration with react-dnd ?

I want to compare selectable and drag-drop multiple items. How can I make it with react-dnd?

Bug in _highlight

https://github.com/Mobius1/Selectable/blob/0.19.0/selectable.js#L1707

  if (item.selecting) {
                        classList.remove(el, o.classes.selecting);
                        item.selecting = false;
                        if (cmd && item.startselected) {
                            classList.add(el, o.classes.selected);
                            item.selected = true;
                        } else {
                            if (item.startselected && !o.toggle) {
                                classList.add(el, o.classes.deselecting);
                                item.deselecting = true;
                            }
                        }
                    }
                    if (el.selected) {
                        if (!cmd) {
                            if (!item.startselected) {
                                classList.remove(el, o.classes.selected);
                                item.selected = false;

                                classList.add(el, o.classes.deselecting);
                                item.deselecting = true;
                            }
                        }
                    }

I don't think this check for el.selected is correct; I believe it should be item.selected. el would be the DOM element, which doesn't appear to ever get .selected set on it.

I am certain there must be an easy way

Is there an easy way to require the Shift-Key to be down prior to dragging?

how to destroy selectable element ?

Selected area is wrong

When i try to select the rows in Selectable with Tables demo, the area i selected with dashed line border area is different from the selected area. You can see this from the image below.
I'm using chrome browser version 64.

Deselect on mouseup

Hello, is it possible to deselect items on mouseup not mousedown? I want to integrate this script with draggable one

Temporary stop when selector starts from inside previously selected elem

Hello. First, sorry for bad english
I need drag selected elements that selected via Selectable instance.
But when drag, it's drawing new rectangle.
So, when elements are selected, is it possible temporary stop the instance?
I tried enable disable method but when disabled the instance, i lost selected items and listeners.

General Question: How to improve the scrolling behavior on Mobile devices (iOS & Android)

Hello, my basic setup is like this but its a bit slow on mobile. It's hard to deselect and the scrolling is way too slow.

const selectable = new Selectable({
    appendTo: ".files-list",
    ignore: ["img", "ion-icon"],
    autoScroll: {
    threshold: 0,
    increment: 100,
    }
});

Any tips or additional JS command to make it more responsive and fluid? Otherwise, I can use the builtin features to select all, invert and so on... While I find a better way to work this out.

Regards

Ctrl+click not deselecting when selected items reaches maxSelectable

Hi,

When maxSelectable is used and you select the maximum amount of items, you can no longer deselect single items by using control+click.

Thanks in advance.

Bower installation not working

When I tried to install this using bower I got the following error:

bower install selectable.js --save
> bower                        ENOTFOUND Package selectable.js not found

Npm is working fine, using that for now.

Add max selections option

Add maxSelections option to limit the number of selected items.

License problems

Unfortunately, there are several licenses within the repository.

In the readme.md under Copyright at the bottom is BSD & MIT, in the file LICENCE is MIT and in the source code in selectable.js is Dual Licence MIT and GPL.

What is the license under which the project may be used?

I suppose it is MIT and the others may be old remnants. I would be very grateful if it was clear under which license I am allowed to use the project!

Access to the documentation

via https://mobius-studios.gitbook.io/selectable/
...the link in Wiki section is broken.

Selecting in a calendar

Hi,
first of all great work!
Let's assume I have a calendar which displays each month side-by-side.
I have the following config to enable selectable:

const selectable = new Selectable({
        lassoSelect: "sequential",
        appendTo: "#calendar",
        filter: ".day"
});

When I start selecting in one month and move to the second month like in the following image (Start 23.07 End 30.08):

Please note that the mouse was moved from top left to bottom right (see lasso).
The example above works as expected.
However, when I want to do the following: Start 23.07 End 10.08 (mouse is moved from bottom left to top right now!), it's not selecting any field:

The expected behaviour should be that everything between 23.07. and 10.08. is selected now.

Therefore I'm wondering how to achieve the behaviour with your selectable?

All the best

Need to allow click event listener on selected item

I've got a single item selected and need to register an event listener. Can you allow the click event to pass through?

Endless selecting

I've tested this package and..
Sometimes I've got ui-selecting items when I've finished selecting
It's strange, I'm clicking on elements one by one and 50/50% I've got the ui-selecting stuck.

Example here

Looks like something with touch events

You can try to reproduce it on jsfiddle.net by clicking on some rows several time and done

maxSelectable and toggle

Hello!
If set maxSelectable and toggle options, then when the limit is reached, items is not deselect.
https://jsfiddle.net/Ljazheo0/1/

Can't click link on mobile

Hello. I have selectable table rows and selection works fine. But problem is I can't click link in row (plugin just select row but link doesn't work).

Any way to handle this?

Android Chrome latest.

Question: "selecting" event, next to "selecteditem" and "deselecteditem" ?

Hi. I am working on replacing jQuery-ui, which offers 7 relevant events, among them "selecting", "unselecting".
If I understood correctly, "Selectable" 0.19.1 does set respective classes (for formatting/display) "ui-selecting" when transitioning to "ui-selected", but it seems respective "selecting" event is not provided. Is that understanding correct?

Events firing regardless of Selectable instance?

I am slightly confused by the firing of events across multiple selectable instances. As a result it's not clear to me if what am experiencing is a bug or expected behaviour.

I have two selectable instances on a page:

            const selectable = new Selectable({
                toggle: true
            });

            const groupSelectable = new Selectable({
                filter: ".team-row"
            });

Listening to the end event for one of the instances (selectable.on("selectable.end", function(e, selected, unselected) {...), the code seems to be firing also for selection changes in the second (groupSelectable) instance. This is in itself something that I could have worked around had it not been for the fact that at the point of execution, the groupSelectable.getSelectedItems() returns empty.

If I create a separate groupSelectable.on("selectable.end", function(e, selected, unselected) {... event listener, groupSelectable.getSelectedItems() contain the expected items. However, I am looking to perform an action once all the selections have "settled down" (across multiple instances), and I don't know how I would go about that.

Apologies if there's something I'm not understanding.

lasso position when transform zoom

Is it possible to adjust lasso position when set css transform zoom to parent div of objects ?
Now selected items are ok, but lasso was draw on wrong position

v 10.6 not available via npm

Hi, I would like to use v 10.6 via npm as it containtains some critical bug fixes, but it is not available.
Thanks,
Sash

Destroying instance doesn’t remove all event handlers

When destroying instance with destroy() method, touchstart event handlers are still there.

selectable.min.js:11 Uncaught TypeError: Cannot read property 'start' of undefined
    at a.touchstart (selectable.min.js:11)

I’ve pinpointed issue to these lines of code.

Am I doing something wrong?

Can sequential selection be improved?

Thank you for this great library. We use it to allow users to select text and add highlights to PDFs in a web browser. The issue is that when a user starts the lasso outside of the first element, all previous elements are added to the selection. This can be reproduced in your demo page for 'lassoSelect` option. We work around the issue like this:

let selectable = new Selectable({
    lassoSelect: 'sequential'
});

selectable.on('start', function (e, item) {
    if(typeof item === 'object') {
        // User started the lasso inside an item. Allow selecting.
        This.selectable.off('end');
        This.selectable.on('end', method);
    } else {
        // User started the lasso outside an item. Disallow selecting.
        This.selectable.off('end');
    }
});

Just thought I would let you know of this.

Better Support for Hybrid Devices

Hi, when I simply try the demo link https://codepen.io/Mobius1/pen/OOXPwo in Chrome it's working great, in Firefox I can't select via the drag & drop (rectangle) option. It does not seem to work in FF at the moment? I have both the latest versions of these browsers installed. Edge for example works, too without any problems.

cdn.jsdelivr.net : how to hand-pick a version?

Could not find what link to use to self-select a specific Selectable release, e.g. 0.19.1 .

I only found this link: https://cdn.jsdelivr.net/npm/selectable.js@latest/selectable.min.js which points to latest release version.

By-the-way: is there a link to previous versions of the documentation (e.g. of the 0.19.1 release?)

在vue中怎么引入样式，完全看不到效果，就能看到鼠标变成可以拖选，其他完全没有效果

Are the examples up to date?

The first argument here is returning as a mouse event, not a list of selected items, any idea why?

selectable.on("selectable.end", function(selected, unselected) {
		console.log( selected );
	});

Second shift+click produces unexpected selection

Steps to reproduce:

1. Click an item to select it
2. Begin holding down shift
3. Click another item. This selects all items in-between, as expected.
4. While continuing to hold shift, click that last item again.

Expected behavior: Step 4 produces no change to the selection
Actual behavior: A seemingly random set of additional items are selected

On right click not need to do select or unsclect