search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
530 stars 71 forks source link

Feature: Temporary disable dragging #45

Closed jannnik closed 3 years ago

jannnik commented 3 years ago

Thanks for the great library!

We have editable nodes which transform to a TextField when clicking on an edit button. When selecting a text in the TextField via click + mouse movement, the node is dragged unintentionally. image

To stop this behavior, we would like to disable dragging on all nodes while editing a node. We did not find any property to solve or workaround our problem.

A fix for our problem could be implemented by adding an canDrag property which can be false.

I look forward to realizing the request and can also provide support if needed.

minop1205 commented 3 years ago

@jannnik Thanks for your message! I think it's a good and versatile feature.

I will add canDrop property in next publish. (In addition to this, I am also considering adding a draggable property (default = true) to each node.)

minop1205 commented 3 years ago

I published beta version that includes canDrag feature. please install this version bellow and make sure canDrag feature!

npm install @minoru/react-dnd-treeview@beta

If you want to prohibit dragging the entire treeview, do the following

<Tree
  {...props}
  canDrag={() => false}
/>

If you want to prohibit dragging only on a specific node, do the following

<Tree
  {...props}
  canDrag={(node) => node.id !== 123}
/>

NOTE: Even if you prohibit the dragging of a specific node with canDrag, the parent node will still be dragged because the event propagates to its parent node. Therefore, if you want to prohibit the dragging of a specific child node, you need to prohibit the dragging of all ancestor nodes.

For a concrete code example, please see the following sample.

Disable all node example: https://codesandbox.io/s/editable-ts-cl3wi

Disable specific node example: https://codesandbox.io/s/editable2-ts-izb0b

minop1205 commented 3 years ago

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

minop1205 commented 3 years ago

v1.4.2 has been published.

There are two fixes in this version.

  1. Fixed a bug where the text in the text input box could not be selected with the mouse.
  2. added a new canDrag property.

For 1, since it is a bug, it was handled by default without any special settings. Therefore, the canDrag property is not needed to support text selection.

example: https://codesandbox.io/s/editable-ts-cl3wi

The canDrag property is not directly related to 1, but it was added to allow finer control of the tree.

jannnik commented 3 years ago

Thank you so much, this solves our problem excellently!