How to prevent node drag and drop into different parents in React Treeview component?

This article explains about how to prevent node drag and drop into different parents in React Treeview component.
In order to rearrange the positions of tree nodes within the same parent node, certain conditions have been examined. Specifically, the drop action is invalidated if the node being dragged and dropped does not share the same parent ID as the dropped node, and if the position of the dropped node is set as Inside in the nodeDragStop event.

This functionality can be observed in the provided sample code. The TreeViewComponent is configured with the necessary fields and the allowDragAndDrop property is set to true. The onDragStop function is invoked when the node dragging is stopped. Within this function, it is checked whether the parent ID of the dragged node is different from the parent ID of the dropped node or if the position of the dropped node is Inside. If either of these conditions are met, the drag and drop action is cancelled.

<TreeViewComponent
   fields={fields}
   allowDragAndDrop={allowDragAndDrop}
   nodeDragStop={onDragStop.bind(this)}
/>



const allowDragAndDrop = true;
const onDragStop = (args) => {
  if (args.draggedNodeData.parentID != args.droppedNodeData.parentID || args.position === 'Inside') {
      args.cancel = true;
  }
};

Sample : https://stackblitz.com/edit/react-uypfln-o77jx9?file=index.js

Conclusion

I hope you enjoyed learning on how to prevent node drag and drop into different parents in React Treeview component.

You can refer to our React Treeview feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Treeview Example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!