Feature: Temporary disable dragging

[Jannik Falkner]

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.

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]

@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]

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]

Merged: #48

[minop1205]

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.

[Jannik Falkner]

Thank you so much, this solves our problem excellently!