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