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

Drag and drop using angular

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

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

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var DraggerDirective = /** @class */ (function () {
    function DraggerDirective(elementRef) {
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    DraggerDirective.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        /** @type {?} */
        var el = this.elementRef.nativeElement;
        el.draggable = 'true';
        el.addEventListener('dragstart', (/**
         * @param {?} e
         * @return {?}
         */
        function (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 {?}
         */
        function (e) {
            e.preventDefault();
            _this.removeStyle();
            el.classList.remove('drag-src');
        }));
    };
    /**
     * @return {?}
     */
    DraggerDirective.prototype.setDefaultStyle = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var el = this.elementRef.nativeElement;
        el.style.backgroundColor = '#ccc';
        el.style.color = '#fff';
        el.style.padding = '5px';
        el.style.margin = '1px';
    };
    /**
     * @return {?}
     */
    DraggerDirective.prototype.removeStyle = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var el = this.elementRef.nativeElement;
        el.removeAttribute('style');
    };
    DraggerDirective.decorators = [
        { type: Directive, args: [{
                    selector: '[dragMe]'
                },] }
    ];
    /** @nocollapse */
    DraggerDirective.ctorParameters = function () { return [
        { type: ElementRef }
    ]; };
    DraggerDirective.propDecorators = {
        dragdata: [{ type: Input }]
    };
    return DraggerDirective;
}());

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

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

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