Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Environments

• Framework name: Javascript

Description

I need table rows to be selected and trying to achieve that using selecto. Attached a sample code that I have been trying and my intention is I should be able to select the rows by clicking them individually (which works) and also by dragging mouse over TRs, which I dont know how to achieve. Can someone help me to achieve it?

selectable.html.txt

Environments

• Framework name: React

Description

I'm trying to prevent the selected item to be deselected when I press shift key and select it again. Is there any way to make this work? Thanks for your time.

Hello, there's anyway to use window scroll as an option ? Without using a container to get her ref. I've tried to follow the docs but i didn't succeed using window.scroll

Environments

• Framework name: Vue
• Framework version: 2

Description

I want to abort a drag, if my program is in a specific mode and if it is not a selectByClick (= without mouse drag). But the gesto object provided by the OnDragStart Event does not know yet if it is a drag, so the isDrag property is still false, even if the user goes on to drag the mouse.

There are 2 potential solutions, but I have not been able implement any of them:

• There is a way to abort the drag from inside a onDrag Event
• There is a way to disable drag selecting temporarily, without disabling the selectByClick functionality

Yes I could add another click event listener to the object directly, reimplement the selectByClick functionality and completely disable select during the before-mentioned program mode, but that would mess up my data flow: Selecto events set the selected objects in my program state store and add the selected elements to the moveable targets. It would be very messy to have two event types that cause changes to the moveable targets (from 2 components)

Environments

• Framework name:
• Framework version:
• Component name:
• Component version: 1.11.1
• Testable Address(optional):

Description

When the parent container contains css style: "transform:'scale(1)'", the selection box position is incorrect. The reason for the error: the start and end positions of the selected rectangle have not been converted.

• Framework name: Vanilla JS
• Testable Address(optional): https://codepen.io/yesvivek/pen/LYNbQdo
• OS: Windows
• Browser: Chrome

Am using Selecto to select table rows and has been working good. One problem I notice when using Ctrl and/or shift toggleContinueSelect is that when moving away from the page using Ctrl+Tab and returning back makes Selecto think that I keep pressing Ctrl/shift and it continues to select without removing old selection.

Reproduction steps to follow on above page (or in your demo page):

1. Select any row in the table.
2. Use Ctrl+tab to navigate to next tab in the window.
3. Do whatever you wanted to do on the next tab.
4. Switch back to the selecto page.
5. Select any row.
6. Previous selection is not cleared.

Notice that I never intended to use Ctrl for selection at all.

• Framework name: Vanilla JS
• Testable Address(optional): https://codepen.io/yesvivek/pen/LYNbQdo

I have been trying to use selecto to select rows in the table. I want to allow selection of rows using keyboard and also using mouse. I take care of keyboard selection and selecto is used only for mouse selection. Whenever keyboard is used, I use selecto.setSelectedTargets to set the current selection and it works fine so far.

This particular problem arises only when mixing keyboard and mouse. Follow below steps on above sample page that is created to reproduce this issue. I have used textbox instead of up or down arrow key because I started with textbox first. I can rewrite to use keyboard event if needed or simplify reproduction sample.

1. Click on row 6 (any row other than 2).
2. Press Shift key.
3. Click Add button which will select row 2.
4. Do not release Shift key.
5. Press some key (Down arrow)
6. Do not release shift key.
7. Click on new row.
8. Now old selection is removed

Callbacks are called with removed containing previously selected elements even though Shift (toggle) key is still pressed. Am not sure whether this is a bug or I need to set keyContainer option with different value. Please advice.

Environments

• Framework name: ReactJS
• Framework version: 16.13.1
• Component name: react-selecto + react-moveable
• Component version: react-selecto= 1.5.2 and react-moveable=0.21.6-rc
• Video Address(optional): https://www.screencast.com/t/DIWtY7mpm6

Description

after selecting group elements and start dragging all elements collapse on same position but if i start scalling after selecting elements than selected elements don't collapse then dragging also work perfectly.

Environments

• Framework name: React Hooks
• Framework version:
• Component name:
• Component version:
• Testable Address(optional):

Description

Hello again @daybrush , Thank you so mush for great plugin. I'm using react-moveable with selecto as [https://daybrush.com/selecto/storybook/?path=/story/selecto-with-moveable--select-moveable-targets-in-real-time].

In your example, selection is unselect by clicking within this ".selecto-area .elements" div. I would like to remove selection by clicking outside area of Selecto. I tried with two option, First option with setTargets([]) to remove selection and it was remove the selection but i can't select items again. Second option is i add ".selecto-area .elements" class to body tag. But other click event doesn't work inside that body.

Do you have any example like that please?

Environments

• Framework name: React
• Framework version: 17.0.2
• Component name: Selecto (+Moveable)
• Component version: 1.17.0

Description

https://user-images.githubusercontent.com/88068998/187331828-2fd3effe-69aa-4ff6-a47c-3194b4787cf2.mov

Hi! I'm using Selecto with selectFromInside disabled and since I disabled the option, it seems to have created a phantom mouse down issue, which can become an annoyance very quickly. I cannot replicate it on none of the sandboxes online and I was wondering if you might have an idea what could be the issue in this case.

^ Attached you can find a screencast of the issue - I'm never holding down the mouse for a proper drag, the elements are just following my mouse.

this.selecto = new Selecto({
   container: this.div,
   rootContainer: this.div,
   selectableTargets: targetElements,
   toggleContinueSelect: 'shift',
   selectFromInside: false,
});

Environments

ngx-selecto

Description

Hi, when I position the selecto container in the middle of a page using a transform. The drag selection drag box is positioned in the wrong place.

I centered the container like this. If I remove the transform, it all works fine.

.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }

If this isn't easy to fix, is it possible to hide the drag area during the selection process?

Environments

• Framework name: VanillaJS
• Component version: 1.20.3
• Testable Address

Description

Use case 1:

• no element is selected
• toggleContinueSelect key is pressed
  • in my example, shift is used
• element is clicked on to be selected

problem: element is selected and immediately deselected

Use case 2:

• While selecting multiple elements with toggleContinueSelect, if you have elements selected and their parentElement is selected
• select parent and deselect children

problem: parent is selected, and immediately deselected

I've seen your suggestion in #97; enabling toggleContinueSelectWithoutDeselect with the same value as toggleContinueSelect resolves the problems above but then I am unable to deselect elements using that same key.

Would you have any suggestions on how to go about resolving the above?

Note: I have resolved the inverse of Use case 2 (parent is first selected then children are attempted to be selected using toggleContinueSelect) in the link I provided.

Environments

• Framework name: vue-selecto
• Framework version: 1.20.3
• Component name:
• Component version:
• Testable Address(optional):

Description

https://user-images.githubusercontent.com/35889246/209068367-b408c5f1-fe9a-4a4f-9fa9-a6e209b5bc67.mp4

I have a selecto object that spans across multiple containers. From the video, what it first looks like is that the first page of both the lists were selected when I selected across multiple divs. However, it looks like the hidden elements in the first list were also selected which is a little weird. If this is the case, it is good to have an option to pass multiple containers into scrollOptions of vue selecto so that when I scroll past the first set, the screen scrolls and when the scroll reaches the end, it selects the second set. Or is it possible to select only the ones that are not scrolled? Do you have other recommendations for such use cases?

Environments

Using Vanilla JS with SolidJS on the side.

Description

Hey,

I'm trying to create a functionality that will allow direct children of an element (like selection context) to be selected on a single click and grandchildren only on a double click. I tried with custom arrays and setting them as selected in "selectEnd" but it seems like a messy solution since the Selecto already does most of the heavy-lifting and I'm overwriting a lot of logic.

So, I ended up creating setTimeout function which adds children of the selected elements to selectable elements for 500ms and then removes them (enough time for fake dbl click).

To illustrate: -Selection context (parent) --Child elements (selectable on single click) ---Grandchild elements (selectable on dbl click)

The problem I'm having is that none of the select events (start, select, and end) won't fire again on the selected element and its children can't be selected in that case.

Is there a way to force the "select" event on an already selected element without deselecting it?

Here's the code that I was talking about

.on("selectEnd", e => {

    //add drill selectables
    e.selected.forEach(elem => {
        const drill = [...elem.children]
        selecto.selectableTargets = [...selecto.selectableTargets, ...drill]
        console.log(selecto.getSelectableElements())
    })

    //remove drill selectables after 500ms
    setTimeout(() => {
        selecto.selectableTargets = setContext(canvas)
        console.log(selecto.getSelectableElements())
    }, 500);

    //add selected to Solid global signal
    setSelected(e.selected);

    //allow moveables if they're top level only (child of canvas)
    moveables = e.selected.filter(item => item.parentNode === canvas);
    moveable.target = moveables;

})

Environments

• Framework name: Vanilla JS
• Component name: Moveable and Selecto
• Component version: Moveable: 0.40.1; Selecto: 1.20.3

Description

Hello

I am using Selecto in combination with Moveable and I wondered if there is a way to only show Element Guidelines of other Moveables and not the "selected" moveable?

Example: when you look at the use case below, I dragged the selected element from position "1" to position "2" and I don't want to see the Element Guidelines to position "1" since there is no element on that position anymore.

I got it to work when using Moveable alone by removing the dragged Moveable Target HTML-element from the Moveables elementGuideline array. In combination with Selecto, this approach does not seem to work, since the Target of a Moveable can be "undefined".

I also tried it in the example you provided in the Storybook, but i didnt manage to do it.

I wondered if you could take a look into that and maybe provide a simple example for it. Thanks for your help!

Hi Younkue, thank you for this amazing library. The only reason why I am not using Selecto is because of a problem with straight lines. If the line is not straight then there is no problem but if it is straight then I can't move it. This problem occurs in all popular browsers: Chrome, Edge, Opera, Safari and Firefox. I've tested Selecto with Moveable. An example below: A line: Straight lines: