haltu/muuri

Drag start predicate refactoring

Open

#465 opened on May 6, 2021

View on GitHub
 (0 comments) (3 reactions) (0 assignees)JavaScript (10,630 stars) (668 forks)batch import
featurehelp wanted

Description

I've been thinking that default dragStartPredicate needs an overhaul. Currently it allows you to defined distance and delay, and sadly the delay does not work as you would suppose on touch devices as the ancestor scrolling is not prevented properly.

I'd argue that 99% of use cases want the drag to start immediately without any distance or delay on mouse/trackpad devices, and after some 200-300ms delay on touch devices while properly preventing the native scroll on drag start. Also, in most cases, distance property does not make any sense on touch devices as you can't prevent native scroll after you have moved your finger on the screen.

So with this in mind I've been thinking the following API:

{
  dragStartPredicate: {
    mouse: {
      distance: 0,
      delay: 0,
      preventDefault: false
    },
    touch: {
      distance: 0,
      delay: 250,
      preventDefault: true
    },
    pen: {
      distance: 0,
      delay: 0,
      preventDefault: true
    }
  }
}

The idea is that you define the current properties based on the input type (mouse/touch/pen) of the events. preventDefault option here means that should Muuri try to automatically try to prevent native behavior (scrolling) when drag starts. This is not always wanted/needed as your item element might have touch-action:none or some other touch-action value that blocks the native behavior already. But if you want to have that dragging working with delay on scrollable list on touch devices we need to pull off some extra hoops -> e.preventDefault() in every touchmove event after touchstart for every scrolling container element.

Please let me know what you think of this idea, I'm pretty sure it's a much needed improvement over the existing API. If you want to see how to manually build this kind of behavior via custom drag start predicate, check out this demo: https://codepen.io/niklasramo/pen/WNRLwEV

Contributor guide