igniteui-angular-sovn/src/lib/directives/drag-drop/drag-drop.strategy.ts

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import { Renderer2 } from '@angular/core';
import { IgxDragDirective, IgxDropDirective } from './drag-drop.directive';


export interface IDropStrategy {
    dropAction: (drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number) => void;
}

// @dynamic
export class IgxDefaultDropStrategy implements IDropStrategy {

    public dropAction(_drag: IgxDragDirective, _drop: IgxDropDirective, _atIndex: number) { }
}

// @dynamic
export class IgxAppendDropStrategy implements IDropStrategy {

    constructor(private _renderer: Renderer2) { }

    public dropAction(drag: IgxDragDirective, drop: IgxDropDirective, _atIndex: number) {
        const dragElement = drag.element.nativeElement;
        const dropAreaElement = drop.element.nativeElement;
        this._renderer.removeChild(dragElement.parentNode, dragElement);
        this._renderer.appendChild(dropAreaElement, dragElement);
    }
}

// @dynamic
export class IgxPrependDropStrategy implements IDropStrategy {

    constructor(private _renderer: Renderer2) { }

    public dropAction(drag: IgxDragDirective, drop: IgxDropDirective, _atIndex: number) {
        const dragElement = drag.element.nativeElement;
        const dropAreaElement = drop.element.nativeElement;
        this._renderer.removeChild(dragElement.parentNode, dragElement);
        if (dropAreaElement.children.length) {
            this._renderer.insertBefore(dropAreaElement, dragElement, dropAreaElement.children[0]);
        } else {
            this._renderer.appendChild(dropAreaElement, dragElement);
        }
    }
}

// @dynamic
export class IgxInsertDropStrategy implements IDropStrategy {

    constructor(private _renderer: Renderer2) { }

    public dropAction(drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number) {
        if (drag.element.nativeElement.parentElement === drop.element.nativeElement && atIndex === -1) {
            return;
        }

        const dragElement = drag.element.nativeElement;
        const dropAreaElement = drop.element.nativeElement;
        this._renderer.removeChild(dragElement.parentNode, dragElement);
        if (atIndex !== -1 && dropAreaElement.children.length > atIndex) {
            this._renderer.insertBefore(dropAreaElement, dragElement, dropAreaElement.children[atIndex]);
        } else {
            this._renderer.appendChild(dropAreaElement, dragElement);
        }
    }
}