Limit item drop to a particular listbox

[Alis]

I have the following code which allows item drag and drop between 2 listbox:

@Html.EJ().ListBox(inclusionId).Width("100%").Datasource(Model.Inclusions).ListBoxFields(incl => incl.Text("Label").Value("TypeOfInclusionId")).AllowDrag(true).AllowDrop(true).Enabled(true).EnablePersistence(true).ClientSideEvents(evt => evt.ItemDragStop("checkItem"))

@Html.EJ().ListBox(exclusionId).Width("100%").Datasource(Model.Exclusions).ListBoxFields(excl => excl.Text("Label").Value("TypeOfInclusionId")).AllowDrag(true).AllowDrop(true).Enabled(true).EnablePersistence(true).ClientSideEvents(evt => evt.ItemDragStop("checkItem"))

However, since I will have several listbox in my view, I need to restrict the drag and drop of an item.  For example, allow drag and drop from the inclusion listbox to its 'paired' exclusion listbox and not to another inclusion listbox.

I have tried the ItemDragStop event, but this give me the event when the item of a listbox is dragged.

Is there any other way where I can do the above?  Like allow drag and drop only between a set of inclusion and exclusion listbox?

[Deepa Loganathan]

Hi Alis,  

 

Thanks for contacting Syncufsion support.  

 

Currently we do not have support to pair between two listbox control in the drag drop action.  

 

Also as mentioned, you can achieve this by using the itemDragStop event by checking the target of Drop action as given in the below code.  

 

 

function onDragStop1(args) { 

 

        // you can also use  args.target.parentElement.id to find the  id 

 

        if ($($(args.target).find("ul")[0]).attr("id") != "Exclusions") // take the item dropped target id and then restrict it being dropped like this 

 

            args.cancel = true; 

 

    } 

 

 

 

 

Please find the Sample in the below link. 

 

http://www.syncfusion.com/downloads/support/directtrac/141092/ze/ListBoxMVC-283382470 

 

Kindly get back to us if you have any further queries. 

 

Regards,  

Deepa L.