Drag and drop to box holder

[John]

I want to use the ListView component to drag and drop items into a div that will ask the user to drop items into as shown in attached file.  Once dropped I a method that will store the dragged item in a json list in local stoage.  

I have tried to find examples doing something similar but can't see any in the Syncfusion documentation.

Attachment: dragndrop_9594d67a.zip

[Keerthana Rajendran]

Hi John,  

Thanks for contacting Syncfusion support. 

We checked your requirement to drag and drop items from ListView component. Currently ListView does not have drag and drop feature. However, you can utilize our Blazor ListBox component which is very similar to ListView and it has drag and drop support.   

  

Refer to the following links for more details on drag and drop with ListBox component.   

  

Demo: https://blazor.syncfusion.com/demos/listbox/drag-and-drop?theme=bootstrap  

  

UG: https://blazor.syncfusion.com/documentation/listbox/drag-and-drop/  

  

Please let us know if you need any further assistance. 

Regards, 

Keerthana R. 

[John]

Sorry, I should have tagged this as Listbox and not ListView.  The example you sent is what i've aready looked at.

Is there a way to style a list when there are no items in it?

[Aravinthan Seetharaman]

Hi John, 

 

We have checked your query. 

 

Query: Regarding Drag listbox items to Empty container. 

 

Ans: We have checked this query. We can able to achieve this requirement by using Drag and Drop support between two Listboxes. Please refer the below code snippet and sample. 

 

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/listbox_drag814946346  

 

 

<div id="listbox1"> 

    <h4>Group A</h4> 

    <SfListBox TValue="string[]" DataSource="@GroupA" AllowDragAndDrop="true" Scope="combined-list" Height="290px" TItem="CountryCode"> 

        <ListBoxFieldSettings Text="Name" Value="Code" /> 

    </SfListBox> 

</div> 

<div id="listbox2"> 

    <h4>Group B</h4> 

    <SfListBox TValue="string[]" DataSource="@GroupB" Scope="combined-list" AllowDragAndDrop="true" Height="290px" TItem="CountryCode" @ref="list2Obj"> 

        <ListBoxFieldSettings Text="Name" Value="Code" /> 

    </SfListBox> 

</div> 

<SfButton OnClick="getData">Get Updated Data</SfButton> 

@code { 

    SfListBox<string[], CountryCode> list2Obj; 

    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> 

    { 

 

    }; 

 

    public class CountryCode 

    { 

        public string Name { get; set; } 

        public string Code { get; set; } 

    } 

    public void getData() 

    { 

        var data=this.list2Obj.GetDataList(); 

    } 

 

} 

 

  

 Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Listbox_drag_getdata140352020  

 

For more details, please refer the below UG link. 

 

UG link: https://blazor.syncfusion.com/documentation/listbox/drag-and-drop#multiple-listbox  

 

Online Demo Link: https://blazor.syncfusion.com/demos/listbox/drag-and-drop?theme=bootstrap5  

 

Query: Is there a way to style a list when there are no items in it? 

 

Ans: We can able to customize by overriding css in Listbox. Please refer the below code snippet. 

 

   #listbox2 .e-listbox-container { 

     background-color: aliceblue; 

    } 

 

For more details, regarding appearance of Listbox please refer the below UG link. 

 

UG link: https://blazor.syncfusion.com/documentation/listbox/style-and-appearance  

 

Could you please check the above details and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S