`multiDragKey` option does not work

[AJB99]

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]

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]

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]

@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]

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]

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]

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]

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.