Find React Drag And Drop Examples and Templates
Use this online react-drag-and-drop playground to view and fork react-drag-and-drop example apps and templates on CodeSandbox. Click any example below to run it instantly or find templates that can be used as a pre-built solution!
custom-drag-and-drop-devextreme-scheduler-forkedAppointment drag and drop is enabled out-of-the-box, but only if appointments are moved within the Scheduler. In this demo, appointments can be moved between the Scheduler and a list. Follow the steps below to implement this functionality:
Configure the Scheduler
In the appointmentDragging object, implement the onAdd function (in which you should add an appointment) and the onRemove function (in which you should delete an appointment and create a corresponding list item).
Configure list items
Attach an instance of the Draggable component to every list item. The component has the data property that can contain custom data. In this demo, it is an appointment's subject. Implement the onDragStart function in which you should pass the subject to the Scheduler where it is used to add new appointments.
Configure the list
Attach another Draggable instance to the list which only serves as the drop target. Implement the onDragStart function to ensure the list cannot be dragged.
Add the controls to the same group
To enable drag and drop operations between the controls, assign the same value to the group property of the Scheduler's appointmentDragging object and both Draggable components.
