Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

multiDragKey option does not work #1833

Open
AJB99 opened this issue May 20, 2020 · 7 comments
Open

multiDragKey option does not work #1833

AJB99 opened this issue May 20, 2020 · 7 comments

Comments

@AJB99
Copy link

AJB99 commented May 20, 2020

Describe the bug
I'm using the following configuration for my Sortable instance:

const sortable = new Sortable($tree, {
    group : {
        name : 'ui-tree-sortable'
    },
    sort : true,
    direction: 'vertical',
    delay : 0,
    animation : 207,
    multiDrag : true,
    multiDragKey : 'ctrl'
    invertSwap : false,
    swapThreshold : 0.45,
    emptyInsertThreshold : 5,
    forceFallback : true,
    fallbackOnBody : true,
    fallbackTolerance : 3,
    dragClass : 'ui-tree-item-sortable-drag',
    fallbackClass : 'ui-tree-item-sortable-drag',
    selectedClass : 'ui-tree-item-sortable-selected',
    ghostClass : 'ui-tree-item-sortable-placeholder'
}

This prevents multiple items from being selected with a single-click, but it does not allow for multiple items to be selected when holding down the CTRL key and clicking on an unselected item.

Interestingly, SHIFT + click performs a range select as expected (but not advertised).

To Reproduce
See above.

Expected behavior
It should allow me to "cherry-pick" items in the list by holding down the CNTL key and clicking on an item.

Information
sortablejs = 1.10.2
Safari = 13.1
Chrome = 81.0
Vue.js = 2.6

Thanks in advance for any help.

@AJB99
Copy link
Author

AJB99 commented May 20, 2020

Well, I've managed find a work-around for this. Looking at the src I (kinda) figured out what sort of value the multiDragKey option wants:

    optionListeners: {
        multiDragKey(key) {
            key = key.toLowerCase();
            if (key === 'ctrl') {
                key = 'Control';
            } else if (key.length > 1) {
                key = key.charAt(0).toUpperCase() + key.substr(1);
            }
            return key;
        }
    }

So it tried using multiDragKey: 'Meta' and it worked. And I was actually wanting to use the CMND key anyway, so that's all good.

But, the original issue still stands. Attempting to use ctrl as the value does not work.

Also, the docs should be updated to fully explain, and provide examples, of the value(s) that the multiDragKey option accepts and is expecting.

@OkanEsen
Copy link

The issue is that you need to use Control if you want to use the Ctrl-key.

multiDragKey: 'Control'

Also, the docs should be updated to fully explain, and provide examples, of the value(s) that the multiDragKey option accepts and is expecting.

Yeah, the docs are slightly misleading, since CTRL wouldn't work, as described in the documentation.

@AJB99
Copy link
Author

AJB99 commented May 30, 2020

@OkanEsen Thanks for the info.

The docs aren't "slightly misleading", they're downright wrong.

I'd be happy to put in a PR with a fix, but I don't know what values are accepted. I only got lucky with the Meta value that I tried.

@OkanEsen
Copy link

The option is checked against evt.key, with these possible values: https://developer.mozilla.org/de/docs/Web/API/KeyboardEvent/key/Key_Values.

Maybe that’s enough to point everyone to the right direction.

@50kudos
Copy link

50kudos commented Jun 11, 2020

Not sure it's worth open another issue, but I'd come up with the same title "multiDragKey does not work" among the same named group.

Multi-select another item from another list will not deselect the current ones.

@twilson90
Copy link

twilson90 commented Mar 7, 2021

Just came across the most infuriating 'bug' where I couldn't get the control key to work with this, fighting with it for hours.
Turned out it was a chrome extension called Link Klipper with a bizarre feature I was previously unaware of involving holding the ctrl key and dragging, and it was apparently consuming the control key mousedown events.

Just thought I'd mention it here in case anyone comes across a similar bug - try disabling your Chrome extensions!

@jjeff
Copy link

jjeff commented Jul 31, 2022

Multi-select another item from another list will not deselect the current ones.

This is being worked on over here with a pull request here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants