Clone from list1 to list2 on Drag-Drop

[Scott Peal]

Hi,

In the docs/demos it show how to drag and drop between list. How do we drag from list1 and drop to list2, but leave the item in list1. Thus cloning a new item into list2?

Also how to prevent user from dragging from list2 and dropping on list1?

Thanks

[Aravinthan Seetharaman]

Hi Scott, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. 

 

Query: How do we drag from list1 and drop to list2, but leave the item in list1. Thus cloning a new item into list2?  

 

Ans: We have checked this query. We can achieve this requirement by using Dropped event handler of ListBox. Please refer the below code snippet. 

 

 

<div id="listbox1"> 

    <h4>Group A</h4> 

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

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

        <ListBoxEvents TItem="CountryCode" TValue="string[]" Dropped="Dropped"></ListBoxEvents> 

    </SfListBox> 

</div> 

<div id="listbox2"> 

    <h4>Group B Drop Only</h4> 

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

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

        <ListBoxEvents TItem="CountryCode" TValue="string[]" DragStart="DragStart"></ListBoxEvents> 

    </SfListBox> 

</div> 

 

 

    public async Task Dropped(DragEventArgs<CountryCode> args) 

    { 

        await ListObj.AddItems(args.Items, (int)args.PreviousIndex); 

    } 

  

Query: Also how to prevent user from dragging from list2 and dropping on list1? 

 

Ans: We have checked this query. We can achieve this requirement that we can preventing Drag item from listbox using DragStart event. Please refer the below code snippet. 

 

 

 

<div id="listbox1"> 

    <h4>Group A</h4> 

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

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

        <ListBoxEvents TItem="CountryCode" TValue="string[]" Dropped="Dropped"></ListBoxEvents> 

    </SfListBox> 

</div> 

<div id="listbox2"> 

    <h4>Group B Drop Only</h4> 

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

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

        <ListBoxEvents TItem="CountryCode" TValue="string[]" DragStart="DragStart"></ListBoxEvents> 

    </SfListBox> 

</div> 

 

 

    public void DragStart(DragEventArgs<CountryCode> args) 

    { 

        args.Cancel = true; 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Server5.0-407737800  

 

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

 

Regards, 

Aravinthan S