ng-drag-and-drop/fesm2015/ng-drag-and-drop.js

Drag and drop using angular

import { Injectable, ɵɵdefineInjectable, Directive, ElementRef, Input, EventEmitter, Output, NgModule } from '@angular/core';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DragMeService {
    constructor() { }
}
DragMeService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
/** @nocollapse */
DragMeService.ctorParameters = () => [];
/** @nocollapse */ DragMeService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DragMeService_Factory() { return new DragMeService(); }, token: DragMeService, providedIn: "root" });

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DraggerDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        /** @type {?} */
        const el = this.elementRef.nativeElement;
        el.draggable = 'true';
        el.addEventListener('dragstart', (/**
         * @param {?} e
         * @return {?}
         */
        (e) => {
            el.classList.add('drag-src');
            this.setDefaultStyle();
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text', JSON.stringify(this.dragdata));
        }));
        // Remove the drag-src class
        el.addEventListener('dragend', (/**
         * @param {?} e
         * @return {?}
         */
        (e) => {
            e.preventDefault();
            this.removeStyle();
            el.classList.remove('drag-src');
        }));
    }
    /**
     * @return {?}
     */
    setDefaultStyle() {
        /** @type {?} */
        const el = this.elementRef.nativeElement;
        el.style.backgroundColor = '#ccc';
        el.style.color = '#fff';
        el.style.padding = '5px';
        el.style.margin = '1px';
    }
    /**
     * @return {?}
     */
    removeStyle() {
        /** @type {?} */
        const el = this.elementRef.nativeElement;
        el.removeAttribute('style');
    }
}
DraggerDirective.decorators = [
    { type: Directive, args: [{
                selector: '[dragMe]'
            },] }
];
/** @nocollapse */
DraggerDirective.ctorParameters = () => [
    { type: ElementRef }
];
DraggerDirective.propDecorators = {
    dragdata: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropperDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
        this.dropped = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        /** @type {?} */
        const el = this.elementRef.nativeElement;
        el.addEventListener('dragenter', (/**
         * @param {?} e
         * @return {?}
         */
        (e) => {
            el.classList.add('over');
        }));
        el.addEventListener('dragleave', (/**
         * @param {?} e
         * @return {?}
         */
        (e) => {
            el.classList.remove('over');
        }));
        el.addEventListener('dragover', (/**
         * @param {?} e
         * @return {?}
         */
        (e) => {
            if (e.preventDefault) {
                e.preventDefault();
            }
            e.dataTransfer.dropEffect = 'move';
            return false;
        }));
        el.addEventListener('drop', (/**
         * @param {?} e
         * @return {?}
         */
        (e) => {
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            el.classList.remove('over');
            /** @type {?} */
            const data = JSON.parse(e.dataTransfer.getData('text'));
            this.dropped.emit(data);
            return false;
        }));
    }
}
DropperDirective.decorators = [
    { type: Directive, args: [{
                selector: '[dropHere]'
            },] }
];
/** @nocollapse */
DropperDirective.ctorParameters = () => [
    { type: ElementRef }
];
DropperDirective.propDecorators = {
    dropped: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DragMeModule {
}
DragMeModule.decorators = [
    { type: NgModule, args: [{
                declarations: [DraggerDirective, DropperDirective],
                imports: [],
                exports: [DraggerDirective, DropperDirective]
            },] }
];

export { DragMeModule, DragMeService, DraggerDirective, DropperDirective };
//# sourceMappingURL=ng-drag-and-drop.js.map