Overview of Drag and Drop in Angular ListBox

Created: 22 Jan 2019

IntegralUI ListBox component for Angular comes with built-in support for drag and drop operations. You can drag and drop items from one position to another within the same or to different ListBox, ListView, TreeView or other custom Angular components. During this process, several drag and drop events are fired which you can handle in your code and further enhance the drag drop functionality.

This article contains general information about each topic related to drag and drop of items in angular ListBox. You can find detailed information using the links in provided categories.

In this demo, there are some items in the ListBox component. The item drag and drop is enabled, to start it click an item and hold the left mouse button, then start dragging it vertically. When item is dragged outside its space, the drop marker will appear showing the target item and the drop position represented by up/down arrows. To drop an item, release the mouse button. Depending on drop position (up arrow means above the target item and down arrow means below the target item), the item will place accordingly.

General Drag Drop Settings

By default, item drag and drop is disabled. There are two general properties that controls whether drag drop is allowed or not:

• allowDrag - determines whether dragging of items is allowed
• allowDrop - determines whether items can be dropped

Initially, allowDrag is set to false and allowDrop is set to true. This means that in order to start drag and drop for items, the allowDrag property must be set to true. You can set this in component HTML:

• HTML

<div class="app-block" #application>
    <iui-listbox [appRef]="applicationRef" [items]="items" [allowDrag]="true" [controlStyle]="listStyle" #listbox>
        <iui-listitem *ngFor="let item of items" [controlStyle]="itemStyle" [allowAnimation]="true">  
            <div class="lbox-ddovw-item-content">
                <span class="lbox-ddovw-icons {{item.icon}}"></span>
                <span class="lbox-ddovw-title">{{item.text}}</span>
                <span class="lbox-ddovw-year">{{item.year}}</span>
                <iui-rating [controlStyle]="lboxOverviewRatingStyleStars" [value]="getRating(item.rating)" [max]="5"></iui-rating>
            </div>
        </iui-listitem>
    </iui-listbox>
</div>
                            

Once the item dragging is enabled, you can left-click an item and while holding the mouse button pressed, move the item to another position. A drop marker will pop up showing:

• icon - changes to up or down arrow based on whether the item will drop above or below the target item
• label - the target item label

The drop marker will show exactly where the dragged item will drop. If the icon is a down arrow with a line and the label is the name of the ListBox component, it means the dragged item will drop to the end of the items collection.

How to Exclude an Item from Drag and Drop

In cases when you have multiple items, you may want some items to not be dragged. You can do this by setting the allowDrag field of specific item object to false. By setting this, you cannot start dragging the item in the first place.

• Angular

constructor(){
    this.items = [
        { id: 1, icon: "sci-fi", text: "Star Trek", year: "2009", rating: 8.0 },
        { id: 2, icon: "adventure", text: "Cast Away", year: "2000", rating: 7.7, style: { color: 'red' }  },
        { id: 3, icon: "action", text: "Gladiator ", year: "2000", rating: 8.5 },
        { id: 4, icon: "drama", allowDrag: false, text: "Malèna", year: "2000", rating: 7.5 },
        { id: 5, icon: "music", text: "Moulin Rouge", year: "2001", rating: 7.6 },
        { id: 6, icon: "comedy", text: "Snatch", year: "2000", rating: 8.3  },
        { id: 7, icon: "biography", text: "A Beautiful Mind", year: "2001", rating: 8.2  },
        { id: 8, icon: "crime", text: "Black Hawk Down", year: "2001", rating: 7.7 },
        { id: 9, icon: "western", text: "Django Unchained", year: "2012", rating: 8.5  },
        { id: 10, icon: "sci-fi", text: "Man of Steel", year: "2013", rating: 7.2 },
        { id: 11, icon: "horror", text: "The Ring", year: "2002", rating: 7.1 },
        { id: 12, icon: "romance", text: "40 Days and 40 Nights", year: "2002", rating: 5.6 },
        { id: 13, icon: "sci-fi", text: "Minority Report", year: "2002", rating: 7.7 },
        { id: 14, icon: "comedy", text: "Scary Movie 3", year: "2003", rating: 5.5 },
        { id: 15, icon: "music", text: "Walk the Line", year: "2005", rating: 7.9  },
        { id: 16, icon: "romance", text: "How to Lose a Guy in 10 Days", year: "2003", rating: 6.4 },
        { id: 17, icon: "crime", text: "The Dark Knight", year: "2008", rating: 9.0  },
        { id: 18, icon: "horror", text: "American Psycho", year: "2000", rating: 7.6 },
        { id: 19, icon: "drama", text: "The Grand Budapest Hotel", year: "2014", rating: 8.1 },
        { id: 20, icon: "comedy", text: "The Wolf of Wall Street", year: "2013", rating: 8.2 }
    ];
}
                            

In this example, item with label set to Malena is not draggable.

In addition, if you want to prevent other items to drop over specific target item, just set its allowDrop field to false. This will result of changing the drag cursor to NO DROP, whenever an item is dragged over this specific target item.

Available Drag and Drop Events in ListBox

Whenever an item is dragged within the ListBox component, several events can occur. Here is a list of events that may fire:

• dragEnter - occurs when mouse cursor enters the component space for the first time
• dragDrop - occurs on item drop
• dragLeave - occurs when mouse cursor leaves the component space
• dragOver - occurs when mouse cursor is over target item or component

Detailed information is available here: How to Handle Drag and Drop Events in ListBox.

By handling these events in your code, you can cancel the predefined drag drop behavior and add your own custom drag drop operations.

Move Items from One ListBox to Another

You can move items between multiple ListBoxes or to different components. This process is possible because of IntegralUI DragDrop Service, which holds the drag drop data whenever an item is dragged. By including this service as provider in other components, you can intercept this data and process the drag and drop using custom actions.

Related: Drag and Drop between Different Angular Component

In case of a ListBox and ListView, this process is further simplified, because both components inherit the drag and drop functionality from its parent BaseList component. In general, you need to set drag and drop conditions for ListBox and ListView component and then handle the drag drop events, which in this case carry similar data. More information about this topic you can find in this article: Drag and Drop between ListBox and ListView.

Drag and Drop of Multiple Items

Moving items one by one is a time consuming process and in most cases undesirable. There is an option to drag and drop multiple items at once, if the multi-selection is enabled.

When item selection in the ListBox is set to MultiSimple or MultiExtended, you can select more than one item. Furthermore, if the drag and drop is also enabled, you can start the drag process by clicking and moving one of selected items. Because multiple items are selected, all are included with the drag event data and once dropped, all will place at target position.

The event data remains the same, the only difference is that instead of one item, multiple item objects are included. The How to Drag and Drop Multiple Items in ListBox article, explains in detail how to handle this operation.

Create a Copy Item with Drag and Drop

In some cases, instead of moving you may need to create a copy item(s) during drag and drop. Mostly this happens when you want to create a duplicate item list, for example a duplicate of all selected items to be placed in a separate list.

The article: How to Copy an Item with Drag Drop explains in detail how to achieve that.

Conclusion

ListBoxIntegralUI ListBox for Angular comes with built-in support for drag and drop of items. You can set custom conditions on how and when the drag and drop will take place, handle different events and further customize the overall process. In addition, reordering or moving multiple items from one to other components is also supported.

The ListBox component is part of IntegralUI Web.