Differentiating between touch and mouse events in sliders

[robinpoort]

Hello there!

Fantastic work on the slider! 😊

Encountered issue
While integrating the slider into a website project, I've come across a functionality challenge. The current setup doesn't allow distinct drag settings for touch (touchstart) and mouse (mousedown) events. The only options available are true, false, or 'free'.

Rationale for distinct settings
On mobile devices, a seamless swipe to transition between slides is ideal. However, on desktop environments, it's beneficial to enable text selection within the slides using a mouse. Presently, I can manipulate the dragMinThreshold setting to virtually disable dragging for mouse events by setting a high value (e.g., 999). However, this workaround doesn't permit text selection either.

Proposed enhancement
One potential solution could be to expand the 'drag' option to include true, false, 'mouse', 'touch', and 'free'. This approach, though, might limit the ability to combine settings like 'free' and 'touch'. Another idea is introducing a new option, dragType for example, with choices like 'touch', 'mouse', and 'all' (as the default setting).

Seeking your opinion
Do you find this feature addition valuable, or is it just a specific need for my situation?

I'm eager to hear everyone's thoughts on this.

Wishing you a wonderful day,
Robin

[robinpoort]

Hi there,

I've developed a workaround that might be helpful for others facing a similar challenge. This solution is particularly useful if the proposed feature isn't implemented. It specifically addresses the issue of disabling mouse drag while maintaining touch functionality.

Check if the user is using a touch device
By setting an isTouch variable to true on touchstart we can identify if a user is able to use touchmove that we can use later in the code. We do this because the mousedown event is also triggered on touch devices since it's a browser's attempt to unify the handling of user interactions across different input methods (like mouse, touch, and stylus).

// Check if the user is using a touch device
let isTouch;
document.addEventListener('touchstart', function onFirstTouch() {
  isTouch = true;
  document.removeEventListener('touchstart', onFirstTouch, false);
}, false);

Disabling mouse drag but enabling touch drag
In my previous post, I said it is possible to disable mouse drag by setting a high dragMinThreshold value for the mouse, as shown below:

const splide = new Splide('.splide', {
    // Include your other options here
    drag: true,
    dragMinThreshold: {
        mouse: 999, // High value to disable mouse drag
        touch: 10,  // Lower value for touch drag (can't be 0)
    }
}

However, this approach still hinders text selection. To resolve this, you can use the following JavaScript and CSS modifications:

// This code disables dragging for mouse events, enabling text selection
document.addEventListener('mousedown', (e) => {
    if (!isTouch) {
        splide.Components.Drag.disable(true);
    }
}, true); // Setting the listener in the capturing phase

Setting the listener in the capturing phase ensures it executes before Splide's own mousedown event handler.

/* Enhancing text selection for mouse events by adjusting the Splide track's user-select property */
.splide__track--draggable.splide__track--draggable {
    user-select: auto;
    -webkit-user-select: auto;
}

Doubling the class name increases the CSS specificity, ensuring it overrides Splide's default styles. I prefer this technique over using !important.

Mobile text selection
For those seeking to enable text selection on mobile devices (specifically iOS) while retaining the drag functionality, please refer to my solution in this GitHub discussion: #1267 (comment).

This workaround has been effective in my project, and I hope it proves beneficial for others facing similar challenges with Splide. :)