Rank 2
Iron
Iron
Iron
how to implementing a drag and drop feature in a web application that involves a specific component named <Add/>. The web application consists of two boxes: a source box and a target box. Your objective is to allow users to drag the <Add/> component from the source box to the target box.
Please describe in detail how you would approach implementing this drag and drop feature for the <Add/> component. Provide a step-by-step guide outlining the necessary code and interactions to achieve the functionality.
1 Answer, 1 is accepted
Hello Tejas,
Detailed information with examples for our Drag & Drop utilities can be found in the following section of our documentation:
- https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/
- https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/draggable/
- https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/droppable/
In the context of your requirement, you can wrap the Add component in SPAN or DIV element that you can implement the Draggable on it.
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 2
Iron
Iron
Iron
- https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/
- https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/draggable/
- https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/droppable/ I am already read this topic and can provide a short demo code to help me better understand how to implement this."
Hello,
I have modified the example from the Drag & Drop help article and I have replaced the Button component with a custom "Add" component wrapped in a draggable DIV element:
Hope this helps.