Drag and Drop between Angular ListBox and ListView

Created: 21 Jan 2019

IntegralUI ListBox and ListView components for Angular comes with built-in support for custom drag and drop of multiple items within the same or between different components. In case of a ListBox and ListView, this process is straightforward, because both components inherit from the same base class. The same is also for the IntegralUI TreeView component.

ListBox component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

In above demo, you can select and drag drop multiple items between ListBox and ListView. To select multiple items click on one item and while holding the CTRL or SHIFT key, click on another item. While item(s) is selected start dragging it by moving the mouse cursor in any direction. A small drop marker will appear showing the target item and the drop location, up/down arrow states on drop dragged item(s) will place above or below the target item.

As you can see from the demo, you can easily reorder items within the same component or move them from one to another component.

How to Enable Drag and Drop for ListBox and ListView Components

Both components have the same properties: allowDrag and allowDrop that determine drag and drop settings on general level. If a component has allowDrag set to true, then you can start dragging of its items. In similar way, if the component has allowDrop set to true, dragged item(s) are allowed to drop over that component space.

import { Component, enableProdMode, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';

enableProdMode();

@Component({
    selector: 'iui-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;

    // ListBox settings
    public lBoxItems: Array;
    public lBoxAllowDrag: boolean = true;
    public lBoxAllowDrop: boolean = true;

    // ListView settings
    public lViewItems: Array;
    public lViewAllowDrag: boolean = true;
    public lViewAllowDrop: boolean = true;
}
                            
<div class="app-block" #application>
    <iui-listbox [appRef]="applicationRef" [items]="lBoxItems" [controlStyle]="lBoxStyle" [allowDrag]="lBoxAllowDrag" [allowDrop]="lBoxAllowDrop" #listbox>
        <iui-listitem *ngFor="let item of lBoxItems" [controlStyle]="lboxItemStyle" [allowAnimation]="true">  
            <div class="lbox-dd-lblv-item-content">
                <iui-rating [controlStyle]="lboxRatingStyle" [(ngModel)]="item.rating" [max]="5" [division]="2"></iui-rating>
                <span class="lbox-dd-lblv-icons {{item.icon}}"></span>
                <span class="lbox-dd-lblv-title">{{item.text}}</span>
            </div>
        </iui-listitem>
    </iui-listbox>
    <iui-listview [name]="'ListView'" [items]="lViewItems" [appRef]="applicationRef" [controlStyle]="lViewStyle" [allowDrag]="lViewAllowDrag" [allowDrop]="lViewAllowDrop" #listview>
        <iui-listitem *ngFor="let item of lViewItems; let i = index" [controlStyle]="lViewItemStyle" [allowAnimation]="true">
            <div class="lview-dd-lblv-custom-item">
                <img class="lview-dd-lblv-star" src="{{getRating(item.rating)}}" />
                <span class="lview-dd-lblv-rating">{{getRatingValue(item.rating)}}</span>
                <span class="lview-dd-lblv-icons {{item.icon}}"></span>
                <span class="lview-dd-lblv-title">{{item.text}}</span>
            </div>
        </iui-listitem>
    </iui-listview>
</div>
<div class="app-panel">
    <div align="center">
        <label style="margin-right:30px"><input type="checkbox" [(ngModel)]="lBoxAllowDrag" checked="checked" /> Allow Drag</label>
        <label><input type="checkbox" [(ngModel)]="lBoxAllowDrop" checked="checked" /> Allow Drop</label>
    </div>
    <div align="center">
        <label style="margin-right:30px"><input type="checkbox" [(ngModel)]="lViewAllowDrag" checked="checked" /> Allow Drag</label>
        <label><input type="checkbox" [(ngModel)]="lViewAllowDrop" checked="checked" /> Allow Drop</label>
    </div>
    <br style="clear:both;"/>
</div>

                            

Related: Drag and Drop between Different Angular Components

As above demo shows, using provided check boxes you can choose whether dragging and dropping is allowed per component. For example, you can try setting the drag and drop to work only from left to right, that it from the ListBox to the ListView component. To do this, set the following:

ListBox: allowDrag = true, allowDrop = false

ListView: allowDrag = false, allowDrop = true

How to Prevent an Item from Dragging

Above settings, allow you to set general conditions of item drag and drop, on component level. You can customize it further, by setting conditions on item level.

Each item has allowDrag and allowDrop fields, which determine whether an item is draggable or not, and whether it can accept other items to drop over its space. By default, both of these fields are set to true. To prevent an item from dragging, just simple set its allowDrag field to false.

constructor(){
    // . . .

    this.lViewItems = [
        { 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", allowDrag: false, text: "The Ring", year: "2002", rating: 7.1 },
        { id: 12, icon: "romance", text: "40 Days and 40 Nights", year: "2002", rating: 5.6 },

        // . . .
    ]
}
                            

In this code, the item named "The Ring" is not draggable.

You can set further conditions by handling the drag and drop events, but to keep it simple they are omitted from this presentation.

Conclusion

Reordering items using drag and drop in ListBox and ListView components for Angular is easy and straightforward. You can select one or multiple items and choose how drag and drop will take place. There are conditions on general or item level, and in combination with drag drop events, you can create custom operations that work for your application requirements.

The ListBox component is part of IntegralUI Web.

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.