desandro / draggabilly

:point_down: Make that shiz draggable
https://draggabilly.desandro.com
MIT License
3.86k stars 387 forks source link

Scrolling through a list of draggable elements #94

Closed zeraphie closed 9 years ago

zeraphie commented 9 years ago

Making a 'snappie' style version of draggable here: http://codepen.io/zephyr/pen/oXpOdW

Running into a couple of bugs however.

1) On mobile devices, even though the drag is constrained to the x axis, it is tough to get vertical scroll to work for it (even though the snap works perfectly, except it seems to be a bit jagged on mobile, though that may just be my amazon fire phone). I can't think of a way to make it detect if it is scrolling or not (vertically only). tl;dr scroll in vertical, drag in horizontal.

2) On desktop versions, if the mouse escapes the screen while the element is being dragged, the user needs to click back into the window to stop it from dragging. This also occurs if the user drags outside of the mobile screen, and then needs to drag again to fire the dragEnd event (might be just on amazon fire phone)

Great library though!

desandro commented 9 years ago
  1. Draggabilly does not account for vertical mobile scrolling — like Flickity does. If you have a page full of draggable elements, it will be tough to scroll.
  2. This occurs because of the CodePen is in an iframe. Try the debug version
zeraphie commented 9 years ago

Ah ok then, thanks for the help!

kabalage commented 9 years ago

I have a similar problem to 1). For me a good solution would be to provide an option to only activate dragging after long press. If you don't have the time to implement this feature, I would try. Please let me know.

zeraphie commented 9 years ago

Having tried Flickity, it fits perfectly for what I wanted to do (thanks desandro, ended up buying a licence as well), have you checked that out?

kabalage commented 9 years ago

I'd like to implement drag&drop between multiple scrollable containers. Unfortunately Flickity does not help here. :confused:

horasikus commented 9 years ago

any news on this? codepen links are broken

kabalage, did you achieve to only activate dragging after long press? do you have an example? i have a page full of draggable elements and new Draggabilly(...) kills the vertical scroll on mobile devices, even with the draggie element .disable() thanks desandro for your libraries.