Advanced User Interface Controls and Components
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.
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.
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
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.
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.