search

tajo / react-movable

🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
https://react-movable.pages.dev
MIT License
1.55k stars 51 forks source link

Is it possible to limit upper index? #7

Closed drcmda closed 5 years ago

drcmda commented 5 years ago

We have a list of elements, say

Feature A
Feature B
Feature C
-------------
Feature D
Feature E

The bar (-------------) represents a rollbar that can be dragged up or down to mark the end of a sequence. It can't (shouldn't) go higher than, say, A or B. How can i specify that indicies 0-1 are off limits for it?

tajo commented 5 years ago

So the "rollbar" is just an another item? You can keep tracking its position and implement onChange accordingly so it will not allow to finish the swap if the newIndex is off limits?

VuongN commented 5 years ago

Oh, interesting. In other words, combining an (not yet exist) item flag of disabled: true (as discussed in https://github.com/tajo/react-movable/issues/6), where you disable all items and make that "rollbar" the only draggable item, and in onChange, you'd have a conditional to do nothing if newIndex is off limit.

drcmda commented 5 years ago

Yes, that is what we would need. It would be amazing to have some kind of api for this. :) Or is the onChange event something that can already be used for this use case ?

evoratec commented 5 years ago

For example, we need first and last element blocked. Could be a good feature. In our case, we can have elements outside of drag and drop but if you want block in the middle.

tajo commented 5 years ago

The disabled prop is respected as of v2.1.1. That should allow you to implement this use-case.

drcmda commented 5 years ago

@tajo would it also be possible to visually stop it from moving beyond its confines? see: https://codesandbox.io/s/basic-react-movable-tq5hg

in that example it's not supposed to go over workplanes X,Y and Z. but i can still drag it there.

tajo commented 5 years ago

@drcmda Not really possible.

However; I don't think it would be a great UX anyway. You can't prevent user to move the mouse, so you would have to detach the dragged element from the mouse movement? It might be better to convey this information differently, like changing the styles of the allowed drop zone?

drcmda commented 5 years ago

makes sense, we'll try it that way. thanks for this lib once again! :-)