Feature request: drag items by handle

[iames]

Feature requests

Overview

An option to add a handle to each row to start dragging. Instead of start dragging by clicking anywhere in the row add a new element and only start dragging by clicking that handle.

Purpose / Reason

In mobile devices sometimes scrolling over a tree (with the finger) is interpreted as a drag-and-drop action and the tree is messed.

Any implementation ideas?

It would be nice if in the render function the handle could be defined.

Reference information

I have read the project is using react-dnd for drag and drop functionality. Here is an example of react-dnd https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/05-customize/handles-and-previews (it would be the example with the green box) Another project that supports this is: dnd-kit https://5fc05e08a4a65d0021ae0bf2-bphcuqqqih.chromatic.com/?path=/docs/examples-tree-sortable--all-features In this example the handle can is more evident.

[ayoub-root]

is there any updates about this issue? i have the same problem

[ayoub-root]

i solved it by the following add new boolean variable const [dragHandler,setDragHandler]=useState(false) canDrag (node)=>{ if(dragHandler) return true } .... render(node,{.....})=>{ return(<CustomNode. ...... handleDrag={e=>setDragHandler(e) } )/>) }

inside the customNode i added IconButton

<IconButton draggable='true' onDragStart={()=>props.handleDrag(true)} onDragEnd={()=>props.handleDrag(false)} ..../>

[mattevans-dev]

@minop1205 is this a feature you are considering to introduce in the future? If not, do you have a recommended workaround to get custom drag elements working? Would greatly appreciate your thoughts

[minop1205]

@mattevans-dev I am considering implementing this feature in the future. I will be releasing v3 soon, after which I will consider how to implement it. This request will naturally be requested in the future, so it is a high priority among the new features.

[minop1205]

An alpha version of v3.2 is available today. We can install it with the following command

npm i @minoru/react-dnd-treeview@alpha

This version supports drag handle. See below for samples and documentation.

Document

https://github.com/minop1205/react-dnd-treeview#drag-handle

Storybook

https://minop1205.github.io/react-dnd-treeview/?path=/docs/examples-tree-drag-handle--drag-handle-story

[minop1205]

Merged: https://github.com/minop1205/react-dnd-treeview/pull/150