Unable to set reorder to a button

[lynnjoseph24]

Im trying to reorder the elements by using a specific button in the child Component. Im not sure how to do this? Sorry for posting this as an issue. Could somebody help me out as to how to do this?/ Thanks in advance.

[JakeSidSmith]

Hi, @mayheadd. Do you mean you'd like to have a "handle" that is the only part that can be dragged to reorder? This is not currently possible, but I'm in the middle of a re-write (which has pivoted quite a lot), and so this feature should be available in the future.

I'd suggest finding another library for now if you require this ability.

[avbentem]

Just for future readers, one might not need another library with either of the following workarounds:

• Use the disabled prop to only enable the component after an onMouseDown event on some drag handle icon occurred, assuming that also fires on touch. Next, disable it again in onReorder (which only fires if reordering truly happened), and when somehow detecting the mouse outside of the icon.

  (Using both onMouseEnter and onTouchStart along with onMouseLeave and onTouchEnd might be easier. But that needs proper testing on touch devices, and needs testing with blurring due to, e.g., moving the mouse away from the icon after first switching to a different window with they keyboard. Also, keyboard navigation needs to be tested. Note that changing disabled while already dragging has no effect, so one can safely move the pointer away from the icon while dragging.)

• Or: use something like <MyGrandchild onMouseDown={e => e.stopPropagation()}> on whatever parts of the child should not trigger reordering. (One can still use onClick on the very same parts.)

[JakeSidSmith]

Closing due to lack of response. I assume the above workaround is suitable.