HelpBot Assistant

How can I help you?

Drag and drop in React List box component

21 Feb 202617 minutes to read

The ListBox supports dragging individual items or groups of selected items within the same list box or between multiple list boxes.

Customize drag and drop behavior using the following events:

Events Description
dragStart Triggers when the selected element is being dragged.
drag Triggers when the selected element is being dragged.
drop Triggers when the selected element is being dropped.

Single listbox

Enable drag and drop within a single list box by setting the allowDragAndDrop property to true.

The following example demonstrates dragging and dropping items within the same list box:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let data = [
        { "Name": "Australia", "Code": "AU" },
        { "Name": "Bermuda", "Code": "BM" },
        { "Name": "Canada", "Code": "CA" },
        { "Name": "Cameroon", "Code": "CM" },
        { "Name": "Denmark", "Code": "DK" },
        { "Name": "France", "Code": "FR" },
        { "Name": "Finland", "Code": "FI" },
        { "Name": "Germany", "Code": "DE" },
        { "Name": "Hong Kong", "Code": "HK" }
    ];
    let fields = { text: "Name" };
    return (<ListBoxComponent dataSource={data} allowDragAndDrop="true" fields={fields}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  let data: { [key: string]: Object }[] = [
    { "Name": "Australia", "Code": "AU" },
    { "Name": "Bermuda", "Code": "BM" },
    { "Name": "Canada", "Code": "CA" },
    { "Name": "Cameroon", "Code": "CM" },
    { "Name": "Denmark", "Code": "DK" },
    { "Name": "France", "Code": "FR" },
    { "Name": "Finland", "Code": "FI" },
    { "Name": "Germany", "Code": "DE" },
    { "Name": "Hong Kong", "Code": "HK" }
  ];
  let fields:object = { text:"Name"}

  return (
    <ListBoxComponent dataSource={data} allowDragAndDrop="true" fields={fields} />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Multiple listbox

Enable drag and drop between list boxes by setting the allowDragAndDrop property to true and configuring the same scope value for both list boxes.

In the following example, allowDragAndDrop is set to true and scope is set to combined-list to enable drag and drop between both list boxes:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let groupA = [
        { "Name": "Australia", "Code": "AU" },
        { "Name": "Bermuda", "Code": "BM" },
        { "Name": "Canada", "Code": "CA" },
        { "Name": "Cameroon", "Code": "CM" },
        { "Name": "Denmark", "Code": "DK" },
        { "Name": "France", "Code": "FR" },
        { "Name": "Finland", "Code": "FI" },
        { "Name": "Germany", "Code": "DE" },
        { "Name": "Hong Kong", "Code": "HK" }
    ];
    let groupB = [
        { "Name": "India", "Code": "IN" },
        { "Name": "Italy", "Code": "IT" },
        { "Name": "Japan", "Code": "JP" },
        { "Name": "Mexico", "Code": "MX" },
        { "Name": "Norway", "Code": "NO" },
        { "Name": "Poland", "Code": "PL" },
        { "Name": "Switzerland", "Code": "CH" },
        { "Name": "United Kingdom", "Code": "GB" },
        { "Name": "United States", "Code": "US" }
    ];
    let fields = { text: "Name" };
    return (<div className="wrapper">
    <div className="listbox1">
    <h4>Group A</h4>
    <ListBoxComponent dataSource={groupA} allowDragAndDrop="true" height="330px" scope="combined-list" fields={fields}/></div>
    <div className="listbox2">
    <h4>Group B</h4>
    <ListBoxComponent dataSource={groupB} allowDragAndDrop="true" height="330px" scope="combined-list" fields={fields}/></div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  let groupA: { [key: string]: Object }[] = [
    { "Name": "Australia", "Code": "AU" },
    { "Name": "Bermuda", "Code": "BM" },
    { "Name": "Canada", "Code": "CA" },
    { "Name": "Cameroon", "Code": "CM" },
    { "Name": "Denmark", "Code": "DK" },
    { "Name": "France", "Code": "FR" },
    { "Name": "Finland", "Code": "FI" },
    { "Name": "Germany", "Code": "DE" },
    { "Name": "Hong Kong", "Code": "HK" }
  ];

  let groupB: { [key: string]: Object }[] = [
    { "Name": "India", "Code": "IN" },
    { "Name": "Italy", "Code": "IT" },
    { "Name": "Japan", "Code": "JP" },
    { "Name": "Mexico", "Code": "MX" },
    { "Name": "Norway", "Code": "NO" },
    { "Name": "Poland", "Code": "PL" },
    { "Name": "Switzerland", "Code": "CH" },
    { "Name": "United Kingdom", "Code": "GB" },
    { "Name": "United States", "Code": "US" }
  ];

  let fields:object = { text:"Name"};

  return (
    <div className="wrapper">
    <div className="listbox1">
    <h4>Group A</h4>
    <ListBoxComponent dataSource={groupA} allowDragAndDrop="true" height="330px" scope="combined-list" fields={fields}/></div>
    <div className="listbox2">
    <h4>Group B</h4>
    <ListBoxComponent dataSource={groupB} allowDragAndDrop="true" height="330px" scope="combined-list" fields={fields} /></div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Dual ListBox with drag and drop

Enable toolbar and drag and drop actions between two list boxes by assigning a unique ID to each list box and setting the same scope property value:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let groupA = [
        { "Name": "Australia", "Code": "AU" },
        { "Name": "Bermuda", "Code": "BM" },
        { "Name": "Canada", "Code": "CA" },
        { "Name": "Cameroon", "Code": "CM" },
        { "Name": "Denmark", "Code": "DK" },
        { "Name": "France", "Code": "FR" },
        { "Name": "Finland", "Code": "FI" },
        { "Name": "Germany", "Code": "DE" },
        { "Name": "Hong Kong", "Code": "HK" }
    ];
    let groupB = [
        { "Name": "India", "Code": "IN" },
        { "Name": "Italy", "Code": "IT" },
        { "Name": "Japan", "Code": "JP" },
        { "Name": "Mexico", "Code": "MX" },
        { "Name": "Norway", "Code": "NO" },
        { "Name": "Poland", "Code": "PL" },
        { "Name": "Switzerland", "Code": "CH" },
        { "Name": "United Kingdom", "Code": "GB" },
        { "Name": "United States", "Code": "US" }
    ];
    let fields = { text: "Name" };
    let toolbar = { items: ["moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom"] };
    return (<div className="wrapper">
    <div className="listbox1">
    <ListBoxComponent dataSource={groupA} fields={fields} scope="#listbox" toolbarSettings={toolbar} allowDragAndDrop={true}/></div>
    <div className="listbox2">
    <ListBoxComponent id="listbox" dataSource={groupB} scope="#listbox" fields={fields} allowDragAndDrop={true} />
    </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  let groupA: { [key: string]: Object }[] = [
    { "Name": "Australia", "Code": "AU" },
    { "Name": "Bermuda", "Code": "BM" },
    { "Name": "Canada", "Code": "CA" },
    { "Name": "Cameroon", "Code": "CM" },
    { "Name": "Denmark", "Code": "DK" },
    { "Name": "France", "Code": "FR" },
    { "Name": "Finland", "Code": "FI" },
    { "Name": "Germany", "Code": "DE" },
    { "Name": "Hong Kong", "Code": "HK" }
  ];

  let groupB: { [key: string]: Object }[] = [
    { "Name": "India", "Code": "IN" },
    { "Name": "Italy", "Code": "IT" },
    { "Name": "Japan", "Code": "JP" },
    { "Name": "Mexico", "Code": "MX" },
    { "Name": "Norway", "Code": "NO" },
    { "Name": "Poland", "Code": "PL" },
    { "Name": "Switzerland", "Code": "CH" },
    { "Name": "United Kingdom", "Code": "GB" },
    { "Name": "United States", "Code": "US" }
  ];
  let fields:object = { text:"Name"}
  let toolbar:object = { items:["moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom"]}

  return (
    <div className="wrapper">
    <div className="listbox1">
    <ListBoxComponent dataSource={groupA} fields={fields} scope="#listbox" allowDragAndDrop={true} toolbarSettings={toolbar}/></div>
    <div className="listbox2">
    <ListBoxComponent id="listbox" dataSource={groupB} fields={fields} scope="#listbox" allowDragAndDrop={true} />
    </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));