We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Limit item drop to a particular listbox

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?

1 Reply

DL Deepa Loganathan Syncfusion Team November 26, 2018 09:44 AM UTC

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. 
Kindly get back to us if you have any further queries. 
Deepa L. 

Live Chat Icon For mobile
Up arrow icon