Feature: Temporary disable dragging
jannnik opened this issue · comments
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.
@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.)
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
v1.4.2 has been published.
There are two fixes in this version.
- Fixed a bug where the text in the text input box could not be selected with the mouse.
- 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.
Thank you so much, this solves our problem excellently!