search

anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
773 stars 99 forks source link

Horizontal sliding tabs #128

Closed Sharlaan closed 1 year ago

Sharlaan commented 1 year ago

Hello @anseki awesome job with this lib 👏

I'm willing to provide an example of horizontal dragging (like with browsers tabs), reproducing the example 230 (vertically stacked elements) from the official page.

Here is my WIP @ Codesandbox : https://codesandbox.io/s/horizontal-draggable-tabs-plain-draggable-corttc?file=/index.js

I have mostly 3 problems:

  1. containement right bound does not seem to work ? (left bound is OK)
  2. i want snapping to occurs when half of the dragging tab crosses half of the hovered tab, but somehow my offset calculations seem wrong ?
  3. on pointer release, swapping does not occur ?

Can you help please ?

Thanks in advance !

PS: feel free to use this codesandbox in your official site ;)

anseki commented 1 year ago

Hi @Sharlaan, thank you for the comment. Sorry, your code is difficult for me, then I couldn't understand that well. Anyway, the example in the document is very simple. You can read that in the source code. Also, you seem to be mistaking some options snap, onDrag, etc. For example, you should specify length of each tab for step. Please read document more for the options.

Sharlaan commented 1 year ago

I inspected official site code and "simply" reused code from devTools: image then tries to invert from Y to X axis, from "top" to "left", etc...

anseki commented 1 year ago

Yes, that is better. :smile:

anseki commented 1 year ago

No reply came, then this abandoned issue is closed.