Search results

Drag and Drop in React ListBox component

The ListBox has support to drag an item or a group of selected items and drop it within the same list box or into another list box.

The elements can be customized on drag and drop by 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

To drag and drop an item or group of item within the list box can be achieved by setting allowDragAndDrop property as true.

The following sample illustrates how to drag and drop an item within the same list box by enabling allowDragAndDrop property.

Source
Preview
index.tsx
index.html
index.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

export default class App extends React.Component<{}, {}> {
  private 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" }
];
private fields:object = { text:"Name"}
render() {
  return (
    <ListBoxComponent dataSource={this.data} allowDragAndDrop="true" fields={this.fields} />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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" }
        ];
        this.fields = { text: "Name" };
    }
    render() {
        return (<ListBoxComponent dataSource={this.data} allowDragAndDrop="true" fields={this.fields}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

Multiple listbox

To drag and drop an item or group of item between two list boxes can be achieved by setting allowDragAndDrop property as true and scope property should be set to both the list boxes.

In the following sample, the allowDragAndDrop property is set as true and scope is set as combined-list to enable drop and drop in both list boxes.

Source
Preview
index.tsx
index.html
styles.css
index.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

export default class App extends React.Component<{}, {}> {
  private 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" }
];

  private 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" }
];

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

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

<head>
    <title>Syncfusion React ListBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="./styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='sample'>
    <div id='loader'>Loading....</div>
    </div>
</body>
</html>
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.listbox1,
.listbox2 {
    width: 30%;
}

.listbox1 {
    float: left;
    padding: 0 0 0 105px;
}

.listbox2 {
    float: right;
    padding: 0 78px 0 0;
}

.wrapper{
  width: 87%;
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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" }
        ];
        this.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" }
        ];
        this.fields = { text: "Name" };
    }
    render() {
        return (<div className="wrapper">
    <div className="listbox1">
    <h4>Group A</h4>
    <ListBoxComponent dataSource={this.groupA} allowDragAndDrop="true" height="330px" scope="combined-list" fields={this.fields}/></div>
    <div className="listbox2">
    <h4>Group B</h4>
    <ListBoxComponent dataSource={this.groupB} allowDragAndDrop="true" height="330px" scope="combined-list" fields={this.fields}/></div>
    </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));