Drag and drop in EJ2 JavaScript List box control

10 Jan 202515 minutes to read

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.

index.js
index.html
var 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" }
];

var listObj = new ej.dropdowns.ListBox({

    // Set the groupa data to the data source.
    dataSource: groupA,
    // Set allowDragAndDrop as `true`.
    allowDragAndDrop: true,

    // Map the appropriate columns to fields property.
    fields: { text: 'Name' }
});

listObj.appendTo('#listbox');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 ListBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <input id="listbox">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

index.js
index.html
var 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" }
];

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

var listObj = new ej.dropdowns.ListBox({

    scope: 'combined-list',

    // Set the groupa data to the data source.
    dataSource: groupA,

    // Set allowDragAndDrop as `true`.
    allowDragAndDrop: true,

    height: '290px',

    // Map the appropriate columns to fields property.
    fields: { text: 'Name' }
});

listObj.appendTo('#listbox1');

listObj = new ej.dropdowns.ListBox({

    scope: 'combined-list',

    // Set the groupa data to the data source.
    dataSource: groupB,

    // Set allowDragAndDrop as `true`.
    allowDragAndDrop: true,

    height: '290px',

    // Map the appropriate columns to fields property.
    fields: { text: 'Name' }
});

listObj.appendTo('#listbox2');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 ListBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:45%;">
        <div class="drag-drop-wrapper">
            <div class="listbox-control1">
                <h4>Group A</h4>
                <input id="listbox1">
            </div>
            <div class="listbox-control2">
                <h4>Group B</h4>
                <input id="listbox2">
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Dual ListBox with drag and drop

The toolbar and drag and drop actions between two listboxes can be enabled by setting a listbox unique id and the same scope property value.

index.js
index.html
var 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" }
];

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

var listObj = new ej.dropdowns.ListBox({

    // Set the groupa data to the data source.
    dataSource: groupA,
    allowDragAndDrop: true,
    // Map the appropriate columns to fields property.
    fields: { text: 'Name'},

    // Set the scope of the ListBox.
    scope: '#listbox2',

    // Set the tool settings with set of items.
    toolbarSettings: { items: ['moveUp', 'moveDown', 'moveTo', 'moveFrom', 'moveAllTo', 'moveAllFrom']},

    height: '330px'

});

listObj.appendTo('#listbox1');

listObj = new ej.dropdowns.ListBox({

    // Set the groupa data to the data source.
    dataSource: groupB,
    allowDragAndDrop: true,
    // Map the appropriate columns to fields property.
    fields: { text: 'Name' },

    height: '330px',

    // Set the scope of the ListBox.
    scope: '#listbox2',
});

listObj.appendTo('#listbox2');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 ListBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:45%;">
        <div class="dual-list-wrapper">
            <div class="dual-list-groupa">
                <h4>Group A</h4>
                <input id="listbox1">
            </div>
            <div class="dual-list-groupb">
                <h4>Group B</h4>
                <input id="listbox2">
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Drag and drop in EJ2 JavaScript List box control

Single listbox

Multiple listbox

Dual ListBox with drag and drop

See Also