Search results

Drag and drop

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’s drag starts.
Dragging Triggers when the selected element is being dragged.
Dropped Triggers when the selected element is dropped.

Single ListBox

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

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

@using Syncfusion.EJ2.Blazor.DropDowns

<EjsListBox TValue="string[]" DataSource="@GroupA" AllowDragAndDrop="true">
    <ListBoxFieldSettings Text="Name" Value="Code" />
</EjsListBox>

@code {
    public List<CountryCode> GroupA = new List<CountryCode>
    {
        new CountryCode{ Name = "Australia", Code = "AU" },
        new CountryCode{ Name = "Bermuda", Code = "BM" },
        new CountryCode{ Name = "Canada", Code = "CA" },
        new CountryCode{ Name = "Cameroon", Code = "CM" },
        new CountryCode{ Name = "Denmark", Code = "DK" },
        new CountryCode{ Name = "France", Code = "FR" },
        new CountryCode{ Name = "Finland", Code = "FI" },
        new CountryCode{ Name = "Germany", Code = "DE" },
        new CountryCode{ Name = "Hong Kong", Code = "HK" }
    };

    public class CountryCode {
        public string Name  { get; set; }
        public string Code  { get; set; }
    }
}

Output will be shown as

ListBox

Multiple ListBox

To drag and drop an item or group of item between two list box can achieved by setting AllowDragAndDrop property to true and Scope should be set as combined-list in both the listbox.

The following sample illustrates how to drag and drop an item between two list box.

@using Syncfusion.EJ2.Blazor.DropDowns

<div id="listbox1">
    <h4>Group A</h4>
    <EjsListBox TValue="string[]" DataSource="@GroupA" Fields="@FieldSettings" AllowDragAndDrop="true" Scope="combined-list" height="290px"></EjsListBox>
</div>
<div id="listbox2">
    <h4>Group B</h4>
    <EjsListBox TValue="string[]" DataSource="@GroupB" Fields="@FieldSettings" Scope="combined-list" AllowDragAndDrop="true" height="290px"></EjsListBox>
</div>

@code {
    public List<CountryCode> GroupA = new List<CountryCode>
      {
        new CountryCode{ Name = "Australia", Code = "AU" },
        new CountryCode{ Name = "Bermuda", Code = "BM" },
        new CountryCode{ Name = "Canada", Code = "CA" },
        new CountryCode{ Name = "Cameroon", Code = "CM" },
        new CountryCode{ Name = "Denmark", Code = "DK" },
        new CountryCode{ Name = "France", Code = "FR" },
        new CountryCode{ Name = "Finland", Code = "FI" },
        new CountryCode{ Name = "Germany", Code = "DE" },
        new CountryCode{ Name = "Hong Kong", Code = "HK" }
    };

    public List<CountryCode> GroupB = new List<CountryCode>
      {
        new CountryCode{ Name = "India", Code = "IN" },
        new CountryCode{ Name = "Italy", Code = "IT" },
        new CountryCode{ Name = "Japan", Code = "JP" },
        new CountryCode{ Name = "Mexico", Code = "MX" },
        new CountryCode{ Name = "Norway", Code = "NO" },
        new CountryCode{ Name = "Poland", Code = "PL" },
        new CountryCode{ Name = "Switzerland", Code = "CH" },
        new CountryCode{ Name = "United Kingdom", Code = "GB" },
        new CountryCode{ Name = "United States", Code = "US" }
    };

    public class CountryCode {
        public string Name  { get; set; }
        public string Code  { get; set; }
    }
    public ListBoxFieldSettings FieldSettings { get; set; } = new ListBoxFieldSettings
    {
        Text = "Name"
    };
}

<style>
    #listbox1 {
        width: 48%;
        float: left;
    }

    #listbox2 {
        width: 48%;
        float: right;
    }
</style>

Output will be shown as

ListBox