Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[bug] MultiDrag: Avoid selecting an item when scrolling with a touch device

See original GitHub issue

When you finish scrolling a list with a touch device and multiDrag is enabled, the element I clicked on to start scrolling is selected. I would like the element not to be selected.

To reproduce it I create a simle sortable list

Sortable.create(list, {
            group: 'shared',
            multiDrag: true,
            selectedClass: "selected",
            animation: 150,
            delay: 500,
            delayOnTouchOnly: true,
            disabled: false
        });

<div id="list" class="list-group">
    <div class="list-group-item">Item 1</div>
    <div class="list-group-item">Item 2</div>
    <div class="list-group-item">Item 3</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
</div>

and try scrolling the list with a touch device.

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

hedgehog90commented, Nov 2, 2021

This is a big issue that needs resolving. MultiDrag sortables on touch devices should require one or more items to be explicitly selected (tapped) before dragging, otherwise it makes scrolling impossible.

1reaction

CristinCebotaricommented, Mar 22, 2021

@owen-m1, sorry, maybe I didn’t make myself clear.

My problem is that I can’t select an item and then scroll through the list and select another item that was not previously visible in the view. I cannot do this because the element that I touched to start scrolling becomes selected when I take my finger off the screen (end scrolling).

This happens, both when I use fallbackTolerance and when I use delay.

Top Results From Across the Web

85677 – Dragging on a touchscreen display highlights instead ...

The only way to scroll through an open document is the little scroll bar on the right of the document's window, however this...

[BUG] Stop scrolling from interfering with dragging #185 - GitHub

I have a motion component that I want to drag on "x" for animations, but it takes enough of the screen on mobile...

Prevent selection while scrolling listbox - Stack Overflow

The problem I'm having with my ListBox is while I'm flick scrolling, it selects items. Normally touch devices do not select a ListBox...

[touchscreen, X11 & Wayland] Dragging the titlebar breaks ...

Open Firefox; Scroll/zoom on a page (with touchscreen); Ensure that the window manager's titlebar is hidden ( Customize Toolbar > Uncheck 'Title Bar'...

How to prevent overflow scrolling in CSS - LogRocket Blog

Have you ever seen a horizontal scroll bar on your screen because your web content did not fit? Have you opened a modal...