Drag and drop list items in React Listview component
8 Aug 20238 minutes to read
In ListView component, we don’t have drag and drop support. But we can achieve this requirement using TreeView
component with ListView appearance.
Drag and Drop in TreeView component was enabled by setting allowDragAndDrop
to true
.
<TreeViewComponent id='treeview'
dataSource={data}
allowDragAndDrop = {true}
fields= {field} >
</TreeViewComponent>
The TreeView component is used to represent hierarchical data in a tree like structure. So, list items in TreeView can be dropped to child of target element. we can prevent this behaviour by cancelling the nodeDragStop
and nodeDragging
events.
function onDragStop(args: DragAndDropEventArgs) {
//Block the Child Drop operation in TreeView
let draggingItem: HTMLCollection = document.getElementsByClassName("e-drop-in");
if (draggingItem.length == 1) {
draggingItem[0].classList.add('e-no-drop');
args.cancel = true;
}
}
return (
<TreeViewComponent id='treeview'
dataSource={data}
allowDragAndDrop = {true}
nodeDragging = {onDragStop.bind(this)}
nodeDragStop = {onDragStop.bind(this)}
fields= {field} >
</TreeViewComponent>
)
function onDragStop(args) {
//Block the Child Drop operation in TreeView
let draggingItem = document.getElementsByClassName("e-drop-in");
if (draggingItem.length == 1) {
draggingItem[0].classList.add('e-no-drop');
args.cancel = true;
}
}
return (<TreeViewComponent id='treeview' dataSource={data} allowDragAndDrop={true} nodeDragging={onDragStop.bind(this)} nodeDragStop={onDragStop.bind(this)} fields={field}>
</TreeViewComponent>);
In the below sample, we have rendered draggable list items.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
function App() {
//Define an array of JSON data
let data = [
{ text: "Hennessey Venom", id: "list-01" },
{ text: "Bugatti Chiron", id: "list-02" },
{ text: "Bugatti Veyron Super Sport", id: "list-03" },
{ text: "SSC Ultimate Aero", id: "list-04" },
{ text: "Koenigsegg CCR", id: "list-05" },
{ text: "McLaren F1", id: "list-06" },
{ text: "Aston Martin One- 77", id: "list-07" },
{ text: "Jaguar XJ220", id: "list-08" },
{ text: "McLaren P1", id: "list-09" },
{ text: "Ferrari LaFerrari", id: "list-10" }
];
let field = { dataSource: data, id: "id", text: "text" };
function onDragStop(args) {
//Block the Child Drop operation in TreeView
let draggingItem = document.getElementsByClassName("e-drop-in");
if (draggingItem.length == 1) {
draggingItem[0].classList.add("e-no-drop");
args.cancel = true;
}
}
return (<TreeViewComponent id="treeview" allowDragAndDrop={true} nodeDragging={onDragStop.bind(this)} nodeDragStop={onDragStop.bind(this)} fields={field}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import {DragAndDropEventArgs } from '@syncfusion/ej2-navigations';
function App() {
//Define an array of JSON data
let data: any[] = [
{ text: "Hennessey Venom", id: "list-01" },
{ text: "Bugatti Chiron", id: "list-02" },
{ text: "Bugatti Veyron Super Sport", id: "list-03" },
{ text: "SSC Ultimate Aero", id: "list-04" },
{ text: "Koenigsegg CCR", id: "list-05" },
{ text: "McLaren F1", id: "list-06" },
{ text: "Aston Martin One- 77", id: "list-07" },
{ text: "Jaguar XJ220", id: "list-08" },
{ text: "McLaren P1", id: "list-09" },
{ text: "Ferrari LaFerrari", id: "list-10" }
];
let field: object = { dataSource: data, id: "id", text: "text" };
function onDragStop(args: DragAndDropEventArgs) {
//Block the Child Drop operation in TreeView
let draggingItem: HTMLCollection = document.getElementsByClassName("e-drop-in");
if (draggingItem.length == 1) {
draggingItem[0].classList.add("e-no-drop");
args.cancel = true;
}
}
return (
<TreeViewComponent
id="treeview"
allowDragAndDrop={true}
nodeDragging={onDragStop.bind(this) as any}
nodeDragStop={onDragStop.bind(this) as any}
fields={field}
/>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));