Touch enabled selectable plugin inspired by the jQuery UI widget.

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.

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?

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)

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.

currently when holding the metaKey you cannot unselect an item that you selected by accident, this PR added tests to prove they don't and then fixes those

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

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

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.

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.

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!

Finally! You all requested this feature! This pull request allows users to manipulate their plugin on touch devices!

How to use?

Standart usage:

const selectable = new Selectable({
  appendTo: '#content',
});

New usage:

const selectable = new Selectable({
  touch: false, // Set to false if you want to disable "lasso" toggling items still work!
  toggleTouch: true, // Set to true if you want to toggle or false if not
  appendTo: '#content',
});

Note! By default plugin works as a previous version! But now you can manipulate it better 👍

#34

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

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

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

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