NGX Explorer DnD

Drag & Drop in Angular like in a desktop explorer!

• Select with mouse (selection rect)
• Drag & Drop single or multiple files and folders
• Sorting components in a grid new
• Feel the ✨magic✨
• Test it on Stackblitz!

Getting Started

Installation

Install the ngx-explorer-dnd package from npm

npm install ngx-explorer-dnd --save

or use ng add

ng add ngx-explorer-dnd

Usage

HTML Part

Add the ngxExplorerDndContainer directive to your container component. If you wanna use the selection rect, too add it with ngxDragSelection. Add ngxExplorerDndElement to the components to drag, so the file and folders as example.

<div
  class="outer-container"
  ngxExplorerDndContainer
  (dragInProgress)="dragInProgress($event)"
  (selectedElementsChange)="selectedElementsChange($event)"
  [selectionAllowed]="!isDragInProgress"
  (drop)="drop($event)"
  ngxDragSelection
>
  <app-file ngxExplorerDndElement *ngFor="let item of files"> </app-file>
  <app-folder ngxExplorerDndElement *ngFor="let item of files"></app-folder>
</div>

Sorting Function

If you wanna enable sorting so add the enableSorting property to the ngxExplorerDndElement and set it to true.

Code Behind

Simple we set a isDragInProgress boolean. So we don't wanna see the selection rect if we drag some elements. And if we use the selection rect and any elements are under the rect we wanna select it.

export class AppComponent {
  directories = ['Folder 1', 'Folder 2', 'Folder 3', 'Folder 4'];
  files = ['File 1', 'File 2', 'File 3', 'File 4'];

  isDragInProgress: boolean = false;

  @ViewChildren(FileFolder)
  fileFolderComponents!: QueryList<FileFolder>;

  constructor() { }

  dragInProgress(event: boolean) {
    this.isDragInProgress = event;
  }

  selectedElementsChange(event: { count: number; data: FileFolder[] }) {
    for (let _data of this.fileFolderComponents) {
      _data.selected = false;
    }

    for (let _data of event.data) {
      _data.selected = true;
    }
  }

  drop(event: any) {
    console.log(event);
  }
}

The File and Folder Components

If we add the optional FileFolder extension to our components we have access to properties like selected, type, position?, id?.

@Component({
  selector: 'app-file',
  templateUrl: './file.component.html',
  styleUrls: ['./file.component.scss'],
  providers: [
    { provide: FileFolder, useExisting: forwardRef(() => FileComponent) },
  ],
})
export class FileComponent extends FileFolder {}

Optional Target Component

You can set the ngxExplorerDndTarget directive to a folder as example. So if you drag elements into this folder component the drop event will have a target property which includes the optional data you give them.

API

ngxExplorerDndContainer

The highest container of all draggable components.

ngxExplorerDndContainer

The highest container of all draggable components.

ngxExplorerDndElement

A draggable component. Can be a file and a folder

ngxExplorerDndTarget

A target for the ngxExplorerDndElement components. It self can be a ngxExplorerDndElement, too.

ngxDragSelection

Best set this directive to the highest container; so the ngxExplorerDndContainer. Inside this container the selection rect will be show.

Properties and Events

Here are the properties and Events of the directives we have:

Properties

Directive	Property	Type	Description
ngxExplorerDndContainer	dragData	any	Add any optional data for the drop event.
ngxExplorerDndContainer	badge	string or undefined	If set it shows a custom badge inside drag preview.
ngxExplorerDndContainer	cancelAnimation	boolean	If set to true it cancel the move back animation.
ngxExplorerDndContainer	enableSorting	boolean	If set to true sorting is enabled.
ngxDragSelection	selectionAllowed	boolean	Set if the selection rect can be showed.
ngxDragSelection	selectionDivElement	HTMLElement or null	Set a custom selection rect with custom styles.
ngxExplorerDndElement	dndElementData	any	Any optional data for the drop event.
ngxExplorerDndTarget	dndTargetData	any	Any optional data for the drop event.

Events

Directive	Event	Type	Description
ngxExplorerDndContainer	dragInProgress	EventEmitter	Emitted when drag progress was started.
ngxExplorerDndContainer	drop	EventEmitter<{ item: any, target: any, oprionalDragData?: any, oldIndex?: number, newIndex?: number }>	Occurs on ngxExplorerDndElement will be dropped.
ngxExplorerDndContainer	targetChange	EventEmitter<{ target: any }>	Occurs on any ngxExplorerDndTarget is under mouse while dragging.
ngxDragSelection	selectedElementsChange	EventEmitter<{ count: number, data: FileFolder[] }>	Occurs when selected Elements are changed.

Example

A example says more than 1000 words. So play around with Stackblitz!

Version History

• Alpha 10: Added sorting functionality
• Alpha 1 to 9: First release and bug fixes

Authors

• Florian Heuberger (Flo0806)

License

MIT License © Andrea SonnY

Last But Not Least

If you like the project so give it a star! 😎