ng-drag-and-drop
Version:
Drag and drop using angular
91 lines • 5.94 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Directive, Input, ElementRef } from '@angular/core';
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;
}());
export { DraggerDirective };
if (false) {
/** @type {?} */
DraggerDirective.prototype.dragdata;
/**
* @type {?}
* @private
*/
DraggerDirective.prototype.elementRef;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dlci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZy1kcmFnLWFuZC1kcm9wLyIsInNvdXJjZXMiOlsibGliL0RpcmVjdGl2ZS9kcmFnZ2VyLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBRXJFO0lBS0UsMEJBQW9CLFVBQXNCO1FBQXRCLGVBQVUsR0FBVixVQUFVLENBQVk7SUFBSSxDQUFDOzs7O0lBRS9DLG1DQUFROzs7SUFBUjtRQUFBLGlCQWtCQzs7WUFoQk8sRUFBRSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYTtRQUN4QyxFQUFFLENBQUMsU0FBUyxHQUFHLE1BQU0sQ0FBQztRQUN0QixFQUFFLENBQUMsZ0JBQWdCLENBQUMsV0FBVzs7OztRQUFFLFVBQUMsQ0FBQztZQUNqQyxFQUFFLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxVQUFVLENBQUMsQ0FBQztZQUM3QixLQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDdkIsQ0FBQyxDQUFDLFlBQVksQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDO1lBQ3RDLENBQUMsQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO1FBQ2hFLENBQUMsRUFBQyxDQUFDO1FBRUgsNEJBQTRCO1FBQzVCLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTOzs7O1FBQUUsVUFBQyxDQUFDO1lBQy9CLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUNuQixLQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDbkIsRUFBRSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUE7UUFDakMsQ0FBQyxFQUFDLENBQUM7SUFFTCxDQUFDOzs7O0lBRUQsMENBQWU7OztJQUFmOztZQUNRLEVBQUUsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWE7UUFDeEMsRUFBRSxDQUFDLEtBQUssQ0FBQyxlQUFlLEdBQUcsTUFBTSxDQUFDO1FBQ2xDLEVBQUUsQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLE1BQU0sQ0FBQztRQUN4QixFQUFFLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDekIsRUFBRSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7Ozs7SUFFRCxzQ0FBVzs7O0lBQVg7O1lBQ1EsRUFBRSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYTtRQUN4QyxFQUFFLENBQUMsZUFBZSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzlCLENBQUM7O2dCQXRDRixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLFVBQVU7aUJBQ3JCOzs7O2dCQUowQixVQUFVOzs7MkJBTWxDLEtBQUs7O0lBbUNSLHVCQUFDO0NBQUEsQUF2Q0QsSUF1Q0M7U0FwQ1ksZ0JBQWdCOzs7SUFDM0Isb0NBQXVCOzs7OztJQUNYLHNDQUE4QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSW5wdXQsIEVsZW1lbnRSZWYsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbZHJhZ01lXSdcbn0pXG5leHBvcnQgY2xhc3MgRHJhZ2dlckRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGRyYWdkYXRhOiBhbnk7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG5cbiAgICBjb25zdCBlbCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICAgIGVsLmRyYWdnYWJsZSA9ICd0cnVlJztcbiAgICBlbC5hZGRFdmVudExpc3RlbmVyKCdkcmFnc3RhcnQnLCAoZSkgPT4ge1xuICAgICAgZWwuY2xhc3NMaXN0LmFkZCgnZHJhZy1zcmMnKTtcbiAgICAgIHRoaXMuc2V0RGVmYXVsdFN0eWxlKCk7XG4gICAgICBlLmRhdGFUcmFuc2Zlci5lZmZlY3RBbGxvd2VkID0gJ21vdmUnO1xuICAgICAgZS5kYXRhVHJhbnNmZXIuc2V0RGF0YSgndGV4dCcsIEpTT04uc3RyaW5naWZ5KHRoaXMuZHJhZ2RhdGEpKTtcbiAgICB9KTtcblxuICAgIC8vIFJlbW92ZSB0aGUgZHJhZy1zcmMgY2xhc3NcbiAgICBlbC5hZGRFdmVudExpc3RlbmVyKCdkcmFnZW5kJywgKGUpID0+IHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIHRoaXMucmVtb3ZlU3R5bGUoKTtcbiAgICAgIGVsLmNsYXNzTGlzdC5yZW1vdmUoJ2RyYWctc3JjJylcbiAgICB9KTtcblxuICB9XG5cbiAgc2V0RGVmYXVsdFN0eWxlKCkge1xuICAgIGNvbnN0IGVsID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gICAgZWwuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gJyNjY2MnO1xuICAgIGVsLnN0eWxlLmNvbG9yID0gJyNmZmYnO1xuICAgIGVsLnN0eWxlLnBhZGRpbmcgPSAnNXB4JztcbiAgICBlbC5zdHlsZS5tYXJnaW4gPSAnMXB4JztcbiAgfVxuXG4gIHJlbW92ZVN0eWxlKCkge1xuICAgIGNvbnN0IGVsID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gICAgZWwucmVtb3ZlQXR0cmlidXRlKCdzdHlsZScpO1xuICB9XG59XG4iXX0=