Item Drag & Drop - React List (2024)

TS JS

import React, { useCallback, useState } from 'react';import List, { IItemDraggingProps, ItemDragging } from 'devextreme-react/list';import { plannedTasks, doingTasks } from './data.ts';const App = () => { const [plannedTasksState, setPlannedTasksState] = useState(plannedTasks); const [doingTasksState, setDoingTasksState] = useState(doingTasks); const onDragStart = useCallback<IItemDraggingProps['onDragStart']>((e) => { e.itemData = e.fromData === 'plannedTasks' ? plannedTasksState[e.fromIndex] : doingTasksState[e.fromIndex]; }, [plannedTasksState, doingTasksState]); const onAdd = useCallback<IItemDraggingProps['onAdd']>((e) => { const tasks = e.toData === 'plannedTasks' ? plannedTasksState : doingTasksState; const updatedTasks = [...tasks]; updatedTasks.splice(e.toIndex, 0, e.itemData); if (e.toData === 'plannedTasks') { setPlannedTasksState(updatedTasks); } else { setDoingTasksState(updatedTasks); } }, [setPlannedTasksState, setDoingTasksState, plannedTasksState, doingTasksState]); const onRemove = useCallback<IItemDraggingProps['onRemove']>((e) => { const tasks = e.fromData === 'plannedTasks' ? plannedTasksState : doingTasksState; const updatedTasks = [...tasks]; updatedTasks.splice(e.fromIndex, 1); if (e.fromData === 'plannedTasks') { setPlannedTasksState(updatedTasks); } else { setDoingTasksState(updatedTasks); } }, [setPlannedTasksState, setDoingTasksState, plannedTasksState, doingTasksState]); const onReorder = useCallback((e) => { if (e.fromData === e.toData) { const updateTasks = (tasks) => { const updatedTasks = [...tasks]; const [movedTask] = updatedTasks.splice(e.fromIndex, 1); updatedTasks.splice(e.toIndex, 0, movedTask); return updatedTasks; }; if (e.fromData === 'plannedTasks') { setPlannedTasksState((prevTasks) => updateTasks(prevTasks)); } else { setDoingTasksState((prevTasks) => updateTasks(prevTasks)); } } else { onRemove(e); onAdd(e); } }, [onAdd, onRemove]); return ( <div className="widget-container"> <List dataSource={plannedTasksState} keyExpr="id"> <ItemDragging allowReordering={true} group="tasks" data="plannedTasks" onDragStart={onDragStart} onAdd={onAdd} onRemove={onRemove} onReorder={onReorder}> </ItemDragging> </List> <List dataSource={doingTasksState} keyExpr="id"> <ItemDragging allowReordering={true} group="tasks" data="doingTasks" onDragStart={onDragStart} onAdd={onAdd} onRemove={onRemove} onReorder={onReorder}> </ItemDragging> </List> </div> );};export default App;

import React, { useCallback, useState } from 'react';import List, { ItemDragging } from 'devextreme-react/list';import { plannedTasks, doingTasks } from './data.js';const App = () => { const [plannedTasksState, setPlannedTasksState] = useState(plannedTasks); const [doingTasksState, setDoingTasksState] = useState(doingTasks); const onDragStart = useCallback( (e) => { e.itemData = e.fromData === 'plannedTasks' ? plannedTasksState[e.fromIndex] : doingTasksState[e.fromIndex]; }, [plannedTasksState, doingTasksState], ); const onAdd = useCallback( (e) => { const tasks = e.toData === 'plannedTasks' ? plannedTasksState : doingTasksState; const updatedTasks = [...tasks]; updatedTasks.splice(e.toIndex, 0, e.itemData); if (e.toData === 'plannedTasks') { setPlannedTasksState(updatedTasks); } else { setDoingTasksState(updatedTasks); } }, [setPlannedTasksState, setDoingTasksState, plannedTasksState, doingTasksState], ); const onRemove = useCallback( (e) => { const tasks = e.fromData === 'plannedTasks' ? plannedTasksState : doingTasksState; const updatedTasks = [...tasks]; updatedTasks.splice(e.fromIndex, 1); if (e.fromData === 'plannedTasks') { setPlannedTasksState(updatedTasks); } else { setDoingTasksState(updatedTasks); } }, [setPlannedTasksState, setDoingTasksState, plannedTasksState, doingTasksState], ); const onReorder = useCallback( (e) => { if (e.fromData === e.toData) { const updateTasks = (tasks) => { const updatedTasks = [...tasks]; const [movedTask] = updatedTasks.splice(e.fromIndex, 1); updatedTasks.splice(e.toIndex, 0, movedTask); return updatedTasks; }; if (e.fromData === 'plannedTasks') { setPlannedTasksState((prevTasks) => updateTasks(prevTasks)); } else { setDoingTasksState((prevTasks) => updateTasks(prevTasks)); } } else { onRemove(e); onAdd(e); } }, [onAdd, onRemove], ); return ( <div className="widget-container"> <List dataSource={plannedTasksState} keyExpr="id" > <ItemDragging allowReordering={true} group="tasks" data="plannedTasks" onDragStart={onDragStart} onAdd={onAdd} onRemove={onRemove} onReorder={onReorder} ></ItemDragging> </List> <List dataSource={doingTasksState} keyExpr="id" > <ItemDragging allowReordering={true} group="tasks" data="doingTasks" onDragStart={onDragStart} onAdd={onAdd} onRemove={onRemove} onReorder={onReorder} ></ItemDragging> </List> </div> );};export default App;

import React from 'react';import ReactDOM from 'react-dom';import App from './App.tsx';ReactDOM.render( <App />, document.getElementById('app'),);

export const doingTasks = [{ id: 1, text: 'Prepare 2019 Financial' }, { id: 2, text: 'Prepare 2019 Marketing Plan' }, { id: 3, text: 'Update Personnel Files' }, { id: 4, text: 'Review Health Insurance Options Under the Affordable Care Act' }];export const plannedTasks = [{ id: 5, text: 'New Brochures' }, { id: 6, text: '2019 Brochure Designs' }, { id: 7, text: 'Brochure Design Review' }, { id: 8, text: 'Website Re-Design Plan' }, { id: 9, text: 'Rollout of New Website and Marketing Brochures' }, { id: 10, text: 'Create 2018 Sales Report' }, { id: 11, text: 'Direct vs Online Sales Comparison Report' }, { id: 12, text: 'Review 2018 Sales Report and Approve 2019 Plans' }, { id: 13, text: 'Submit Signed NDA' }, { id: 14, text: 'Update Revenue Projections' }, { id: 15, text: 'Review Revenue Projections' }, { id: 16, text: 'Comment on Revenue Projections' }, { id: 17, text: 'Scan Health Insurance Forms' }, { id: 18, text: 'Sign Health Insurance Forms' }, { id: 19, text: 'Follow up with West Coast Stores' }, { id: 20, text: 'Follow up with East Coast Stores' }, { id: 21, text: 'Submit Refund Report for 2019 Recall' }, { id: 22, text: 'Give Final Approval for Refunds' }, { id: 23, text: 'Prepare Product Recall Report' }, { id: 24, text: 'Review Product Recall Report by Engineering Team' }, { id: 25, text: 'Review Training Course for any Omissions' }, { id: 26, text: 'Review Overtime Report' }, { id: 27, text: 'Submit Overtime Request Forms' }, { id: 28, text: 'Overtime Approval Guidelines' }, { id: 29, text: 'Create Report on Customer Feedback' }, { id: 30, text: 'Review Customer Feedback Report' }];

import React from 'react';import ReactDOM from 'react-dom';import App from './App.js';ReactDOM.render(<App />, document.getElementById('app'));

export const doingTasks = [ { id: 1, text: 'Prepare 2019 Financial' }, { id: 2, text: 'Prepare 2019 Marketing Plan' }, { id: 3, text: 'Update Personnel Files' }, { id: 4, text: 'Review Health Insurance Options Under the Affordable Care Act' },];export const plannedTasks = [ { id: 5, text: 'New Brochures' }, { id: 6, text: '2019 Brochure Designs' }, { id: 7, text: 'Brochure Design Review' }, { id: 8, text: 'Website Re-Design Plan' }, { id: 9, text: 'Rollout of New Website and Marketing Brochures' }, { id: 10, text: 'Create 2018 Sales Report' }, { id: 11, text: 'Direct vs Online Sales Comparison Report' }, { id: 12, text: 'Review 2018 Sales Report and Approve 2019 Plans' }, { id: 13, text: 'Submit Signed NDA' }, { id: 14, text: 'Update Revenue Projections' }, { id: 15, text: 'Review Revenue Projections' }, { id: 16, text: 'Comment on Revenue Projections' }, { id: 17, text: 'Scan Health Insurance Forms' }, { id: 18, text: 'Sign Health Insurance Forms' }, { id: 19, text: 'Follow up with West Coast Stores' }, { id: 20, text: 'Follow up with East Coast Stores' }, { id: 21, text: 'Submit Refund Report for 2019 Recall' }, { id: 22, text: 'Give Final Approval for Refunds' }, { id: 23, text: 'Prepare Product Recall Report' }, { id: 24, text: 'Review Product Recall Report by Engineering Team' }, { id: 25, text: 'Review Training Course for any Omissions' }, { id: 26, text: 'Review Overtime Report' }, { id: 27, text: 'Submit Overtime Request Forms' }, { id: 28, text: 'Overtime Approval Guidelines' }, { id: 29, text: 'Create Report on Customer Feedback' }, { id: 30, text: 'Review Customer Feedback Report' },];

<!DOCTYPE html><html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body></html>

.widget-container { display: flex;}.widget-container > * { height: 400px; width: 50%; padding: 10px;}.dx-scrollview-content { min-height: 380px;}