Only drag and drop the item under mouse instead of all selected items

[Ka Wing Pun]

Hello,

I have a ListBox which contains some ISection objects. I tried to implement drag and drop reordering of the items. The following code works fine to reorder if 0 or 1 items are checked in the checkbox. However when more than 1 items are checked the SfListBox would try to drag the checked items together.

I want the drag and drop works so that only the item dragged and dropped by the mouse get moved.

Can you help me please?

<div>
    <h5>Active Sections</h5>
    <p>Drag and drop sections to change the order</p>
    <SfListBox @ref="SectionsSelection" TValue="string[]" AllowDragAndDrop="true" TItem="ISection"
        DataSource="@PdfExportService.AllSections" @bind-Value="PdfExportService.SelectedSections">
        <ListBoxFieldSettings Text="Name" Value="Name"></ListBoxFieldSettings>
        <ListBoxEvents TValue="string[]" TItem="ISection" Dropped="OnDropped"></ListBoxEvents>
        <ListBoxSelectionSettings ShowCheckbox="true" ShowSelectAll="true"></ListBoxSelectionSettings>
    </SfListBox>
</div>

In this code section I can see multiple items are provided in args.Items when some items are checked with the checkbox.

protected void OnDropped(DropEventArgs<ISection> args)
{
    if (!args.Items.Any()) return;
    ISection movedSection = args.Items.First();
    int oldIndex = PdfExportService.AllSections.IndexOf(movedSection);
    if (oldIndex != -1)
    {
        PdfExportService.AllSections.RemoveAt(oldIndex);
        PdfExportService.AllSections.Insert(args.DropIndex, movedSection);
    }
}

[YuvanShankar Arunagiri]

Hi Ka Wing Pun,

We have reviewed your reported query with the Listbox component. Based on the ListBox component architecture, the drag-and-drop action depends on the value property of the listbox. For every selection of a listbox item with or without a checkbox enabled, the draggable depends on the value property of the listbox component. It is the behavior of the listbox component.

But to achieve your requirement, kindly refer to the below code snippet and attached sample code file.

Using the OnDrop event of Listbox, we can assign the drag items along the need to be dropped if we have more selected items in the Listbox component.

<SfListBox @ref="listBoxObj" TValue="string[]" DataSource="@Vehicles" TItem="VehicleData" AllowDragAndDrop="true">

    <ListBoxEvents TValue="string[]" TItem="VehicleData" OnDrop="OnDrop"></ListBoxEvents>

    …..

</SfListBox>

….

private async void OnDrop(DropEventArgs<VehicleData> args)

{

    if (args.Items.Count() > 1)

    {

        args.Items = new List<VehicleData> { args.Items.First() };

    }

}

Reference forum link: https://forumassist.syncfusion.com/182265

Please get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

Attachment: Home_8b5ee6d9.zip

[Ka Wing Pun]

I have got it working, thank you very much.

[YuvanShankar Arunagiri]

You are welcome, Ka Win Pun. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.