ng2-dnd
Version:
Angular 2 Drag-and-Drop without dependencies
101 lines • 12.7 kB
JavaScript
// Copyright (C) 2016-2020 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd
import { __decorate } from "tslib";
import { Directive, Input, Output, EventEmitter } from '@angular/core';
import { AbstractComponent, AbstractHandleComponent } from './abstract.component';
let DraggableComponent = class DraggableComponent extends AbstractComponent {
constructor(elemRef, dragDropService, config, cdr) {
super(elemRef, dragDropService, config, cdr);
/**
* Callback function called when the drag actions happened.
*/
this.onDragStart = new EventEmitter();
this.onDragEnd = new EventEmitter();
/**
* Callback function called when the drag action ends with a valid drop action.
* It is activated after the on-drop-success callback
*/
this.onDragSuccessCallback = new EventEmitter();
this._defaultCursor = this._elem.style.cursor;
this.dragEnabled = true;
}
set draggable(value) {
this.dragEnabled = !!value;
}
set dropzones(value) {
this.dropZones = value;
}
/**
* Drag allowed effect
*/
set effectallowed(value) {
this.effectAllowed = value;
}
/**
* Drag effect cursor
*/
set effectcursor(value) {
this.effectCursor = value;
}
_onDragStartCallback(event) {
this._dragDropService.isDragged = true;
this._dragDropService.dragData = this.dragData;
this._dragDropService.onDragSuccessCallback = this.onDragSuccessCallback;
this._elem.classList.add(this._config.onDragStartClass);
//
this.onDragStart.emit({ dragData: this.dragData, mouseEvent: event });
}
_onDragEndCallback(event) {
this._dragDropService.isDragged = false;
this._dragDropService.dragData = null;
this._dragDropService.onDragSuccessCallback = null;
this._elem.classList.remove(this._config.onDragStartClass);
//
this.onDragEnd.emit({ dragData: this.dragData, mouseEvent: event });
}
};
__decorate([
Input("dragEnabled")
], DraggableComponent.prototype, "draggable", null);
__decorate([
Output()
], DraggableComponent.prototype, "onDragStart", void 0);
__decorate([
Output()
], DraggableComponent.prototype, "onDragEnd", void 0);
__decorate([
Input()
], DraggableComponent.prototype, "dragData", void 0);
__decorate([
Output("onDragSuccess")
], DraggableComponent.prototype, "onDragSuccessCallback", void 0);
__decorate([
Input("dropZones")
], DraggableComponent.prototype, "dropzones", null);
__decorate([
Input("effectAllowed")
], DraggableComponent.prototype, "effectallowed", null);
__decorate([
Input("effectCursor")
], DraggableComponent.prototype, "effectcursor", null);
__decorate([
Input()
], DraggableComponent.prototype, "dragImage", void 0);
__decorate([
Input()
], DraggableComponent.prototype, "cloneItem", void 0);
DraggableComponent = __decorate([
Directive({ selector: '[dnd-draggable]' })
], DraggableComponent);
export { DraggableComponent };
let DraggableHandleComponent = class DraggableHandleComponent extends AbstractHandleComponent {
constructor(elemRef, dragDropService, config, _Component, cdr) {
super(elemRef, dragDropService, config, _Component, cdr);
}
};
DraggableHandleComponent = __decorate([
Directive({ selector: '[dnd-draggable-handle]' })
], DraggableHandleComponent);
export { DraggableHandleComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9kcmFnZ2FibGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLCtDQUErQztBQUMvQywrREFBK0Q7QUFDL0Qsb0NBQW9DOztBQUdwQyxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBRWpGLE9BQU8sRUFBQyxpQkFBaUIsRUFBRSx1QkFBdUIsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBS2hGLElBQWEsa0JBQWtCLEdBQS9CLE1BQWEsa0JBQW1CLFNBQVEsaUJBQWlCO0lBcUVyRCxZQUFZLE9BQW1CLEVBQUUsZUFBZ0MsRUFBRSxNQUFxQixFQUNwRixHQUFxQjtRQUVyQixLQUFLLENBQUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFsRWpEOztXQUVHO1FBQ08sZ0JBQVcsR0FBK0IsSUFBSSxZQUFZLEVBQWdCLENBQUM7UUFDM0UsY0FBUyxHQUErQixJQUFJLFlBQVksRUFBZ0IsQ0FBQztRQU9uRjs7O1dBR0c7UUFDc0IsMEJBQXFCLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7UUFvRHhGLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDO1FBQzlDLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQzVCLENBQUM7SUF6RXFCLElBQUksU0FBUyxDQUFDLEtBQWE7UUFDN0MsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDO0lBQy9CLENBQUM7SUFtQm1CLElBQUksU0FBUyxDQUFDLEtBQW1CO1FBQ2pELElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO0lBQzNCLENBQUM7SUFFRDs7T0FFRztJQUNxQixJQUFJLGFBQWEsQ0FBQyxLQUFhO1FBQ25ELElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO0lBQy9CLENBQUM7SUFFRDs7T0FFRztJQUNvQixJQUFJLFlBQVksQ0FBQyxLQUFhO1FBQ2pELElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO0lBQzlCLENBQUM7SUFzQ0Qsb0JBQW9CLENBQUMsS0FBaUI7UUFDbEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdkMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO1FBQy9DLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxxQkFBcUIsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUM7UUFDekUsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUN4RCxFQUFFO1FBQ0YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFDLENBQUMsQ0FBQztJQUN4RSxDQUFDO0lBRUQsa0JBQWtCLENBQUMsS0FBaUI7UUFDaEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7UUFDeEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7UUFDdEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLHFCQUFxQixHQUFHLElBQUksQ0FBQztRQUNuRCxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQzNELEVBQUU7UUFDRixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxFQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUMsQ0FBQyxDQUFDO0lBQ3RFLENBQUM7Q0FDSixDQUFBO0FBNUZ5QjtJQUFyQixLQUFLLENBQUMsYUFBYSxDQUFDO21EQUVwQjtBQUtTO0lBQVQsTUFBTSxFQUFFO3VEQUE0RTtBQUMzRTtJQUFULE1BQU0sRUFBRTtxREFBMEU7QUFLMUU7SUFBUixLQUFLLEVBQUU7b0RBQWU7QUFNRTtJQUF4QixNQUFNLENBQUMsZUFBZSxDQUFDO2lFQUFvRTtBQUV4RTtJQUFuQixLQUFLLENBQUMsV0FBVyxDQUFDO21EQUVsQjtBQUt1QjtJQUF2QixLQUFLLENBQUMsZUFBZSxDQUFDO3VEQUV0QjtBQUtzQjtJQUF0QixLQUFLLENBQUMsY0FBYyxDQUFDO3NEQUVyQjtBQXlCUTtJQUFSLEtBQUssRUFBRTtxREFBMEM7QUFHekM7SUFBUixLQUFLLEVBQUU7cURBQW9CO0FBbkVuQixrQkFBa0I7SUFEOUIsU0FBUyxDQUFDLEVBQUUsUUFBUSxFQUFFLGlCQUFpQixFQUFFLENBQUM7R0FDOUIsa0JBQWtCLENBOEY5QjtTQTlGWSxrQkFBa0I7QUFrRy9CLElBQWEsd0JBQXdCLEdBQXJDLE1BQWEsd0JBQXlCLFNBQVEsdUJBQXVCO0lBQ2pFLFlBQVksT0FBbUIsRUFBRSxlQUFnQyxFQUFFLE1BQXFCLEVBQUUsVUFBOEIsRUFDcEgsR0FBcUI7UUFFckIsS0FBSyxDQUFDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxFQUFFLFVBQVUsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUM3RCxDQUFDO0NBQ0osQ0FBQTtBQU5ZLHdCQUF3QjtJQURwQyxTQUFTLENBQUMsRUFBRSxRQUFRLEVBQUUsd0JBQXdCLEVBQUUsQ0FBQztHQUNyQyx3QkFBd0IsQ0FNcEM7U0FOWSx3QkFBd0IiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBDb3B5cmlnaHQgKEMpIDIwMTYtMjAyMCBTZXJnZXkgQWtvcGtva2h5YW50c1xuLy8gVGhpcyBwcm9qZWN0IGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgTUlUIGxpY2Vuc2UuXG4vLyBodHRwczovL2dpdGh1Yi5jb20vYWtzZXJnL25nMi1kbmRcblxuaW1wb3J0IHtDaGFuZ2VEZXRlY3RvclJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0RpcmVjdGl2ZSwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBFbGVtZW50UmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHtBYnN0cmFjdENvbXBvbmVudCwgQWJzdHJhY3RIYW5kbGVDb21wb25lbnR9IGZyb20gJy4vYWJzdHJhY3QuY29tcG9uZW50JztcbmltcG9ydCB7RHJhZ0Ryb3BDb25maWcsIERyYWdJbWFnZX0gZnJvbSAnLi9kbmQuY29uZmlnJztcbmltcG9ydCB7RHJhZ0Ryb3BTZXJ2aWNlLCBEcmFnRHJvcERhdGF9IGZyb20gJy4vZG5kLnNlcnZpY2UnO1xuXG5ARGlyZWN0aXZlKHsgc2VsZWN0b3I6ICdbZG5kLWRyYWdnYWJsZV0nIH0pXG5leHBvcnQgY2xhc3MgRHJhZ2dhYmxlQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RDb21wb25lbnQge1xuXG4gICAgQElucHV0KFwiZHJhZ0VuYWJsZWRcIikgc2V0IGRyYWdnYWJsZSh2YWx1ZTpib29sZWFuKSB7XG4gICAgICAgIHRoaXMuZHJhZ0VuYWJsZWQgPSAhIXZhbHVlO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIENhbGxiYWNrIGZ1bmN0aW9uIGNhbGxlZCB3aGVuIHRoZSBkcmFnIGFjdGlvbnMgaGFwcGVuZWQuXG4gICAgICovXG4gICAgQE91dHB1dCgpIG9uRHJhZ1N0YXJ0OiBFdmVudEVtaXR0ZXI8RHJhZ0Ryb3BEYXRhPiA9IG5ldyBFdmVudEVtaXR0ZXI8RHJhZ0Ryb3BEYXRhPigpO1xuICAgIEBPdXRwdXQoKSBvbkRyYWdFbmQ6IEV2ZW50RW1pdHRlcjxEcmFnRHJvcERhdGE+ID0gbmV3IEV2ZW50RW1pdHRlcjxEcmFnRHJvcERhdGE+KCk7XG5cbiAgICAvKipcbiAgICAgKiBUaGUgZGF0YSB0aGF0IGhhcyB0byBiZSBkcmFnZ2VkLiBJdCBjYW4gYmUgYW55IEpTIG9iamVjdFxuICAgICAqL1xuICAgIEBJbnB1dCgpIGRyYWdEYXRhOiBhbnk7XG5cbiAgICAvKipcbiAgICAgKiBDYWxsYmFjayBmdW5jdGlvbiBjYWxsZWQgd2hlbiB0aGUgZHJhZyBhY3Rpb24gZW5kcyB3aXRoIGEgdmFsaWQgZHJvcCBhY3Rpb24uXG4gICAgICogSXQgaXMgYWN0aXZhdGVkIGFmdGVyIHRoZSBvbi1kcm9wLXN1Y2Nlc3MgY2FsbGJhY2tcbiAgICAgKi9cbiAgICBAT3V0cHV0KFwib25EcmFnU3VjY2Vzc1wiKSBvbkRyYWdTdWNjZXNzQ2FsbGJhY2s6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgICBASW5wdXQoXCJkcm9wWm9uZXNcIikgc2V0IGRyb3B6b25lcyh2YWx1ZTpBcnJheTxzdHJpbmc+KSB7XG4gICAgICAgIHRoaXMuZHJvcFpvbmVzID0gdmFsdWU7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogRHJhZyBhbGxvd2VkIGVmZmVjdFxuICAgICAqL1xuICAgIEBJbnB1dChcImVmZmVjdEFsbG93ZWRcIikgc2V0IGVmZmVjdGFsbG93ZWQodmFsdWU6IHN0cmluZykge1xuICAgICAgICB0aGlzLmVmZmVjdEFsbG93ZWQgPSB2YWx1ZTtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiBEcmFnIGVmZmVjdCBjdXJzb3JcbiAgICAgKi9cbiAgICBASW5wdXQoXCJlZmZlY3RDdXJzb3JcIikgc2V0IGVmZmVjdGN1cnNvcih2YWx1ZTogc3RyaW5nKSB7XG4gICAgICAgIHRoaXMuZWZmZWN0Q3Vyc29yID0gdmFsdWU7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogSGVyZSBpcyB0aGUgcHJvcGVydHkgZHJhZ0ltYWdlIHlvdSBjYW4gdXNlOlxuICAgICAqIC0gVGhlIHN0cmluZyB2YWx1ZSBhcyB1cmwgdG8gdGhlIGltYWdlXG4gICAgICogICA8ZGl2IGNsYXNzPVwicGFuZWwgcGFuZWwtZGVmYXVsdFwiXG4gICAgICogICAgICAgIGRuZC1kcmFnZ2FibGUgW2RyYWdFbmFibGVkXT1cInRydWVcIlxuICAgICAqICAgICAgICBbZHJhZ0ltYWdlXT1cIi9pbWFnZXMvc2ltcGxlci5wbmdcIj5cbiAgICAgKiAuLi5cbiAgICAgKiAtIFRoZSBEcmFnSW1hZ2UgdmFsdWUgd2l0aCBJbWFnZSBhbmQgb2Zmc2V0IGJ5IHggYW5kIHk6XG4gICAgICogICBsZXQgbXlEcmFnSW1hZ2U6IERyYWdJbWFnZSA9IG5ldyBEcmFnSW1hZ2UoXCIvaW1hZ2VzL3NpbXBsZXIxLnBuZ1wiLCAwLCAwKTtcbiAgICAgKiAuLi5cbiAgICAgKiAgIDxkaXYgY2xhc3M9XCJwYW5lbCBwYW5lbC1kZWZhdWx0XCJcbiAgICAgKiAgICAgICAgZG5kLWRyYWdnYWJsZSBbZHJhZ0VuYWJsZWRdPVwidHJ1ZVwiXG4gICAgICogICAgICAgIFtkcmFnSW1hZ2VdPVwibXlEcmFnSW1hZ2VcIj5cbiAgICAgKiAuLi5cbiAgICAgKiAtIFRoZSBjdXN0b20gZnVuY3Rpb24gdG8gcmV0dXJuIHRoZSB2YWx1ZSBvZiBkcmFnSW1hZ2UgcHJvZ3JhbW1hdGljYWxseTpcbiAgICAgKiAgIDxkaXYgY2xhc3M9XCJwYW5lbCBwYW5lbC1kZWZhdWx0XCJcbiAgICAgKiAgICAgICAgZG5kLWRyYWdnYWJsZSBbZHJhZ0VuYWJsZWRdPVwidHJ1ZVwiXG4gICAgICogICAgICAgIFtkcmFnSW1hZ2VdPVwiZ2V0RHJhZ0ltYWdlKHNvbWVEYXRhKVwiPlxuICAgICAqIC4uLlxuICAgICAqICAgZ2V0RHJhZ0ltYWdlKHZhbHVlOmFueSk6IHN0cmluZyB7XG4gICAgICogICAgIHJldHVybiB2YWx1ZSA/IFwiL2ltYWdlcy9zaW1wbGVyMS5wbmdcIiA6IFwiL2ltYWdlcy9zaW1wbGVyMi5wbmdcIlxuICAgICAqICAgfVxuICAgICAqL1xuICAgIEBJbnB1dCgpIGRyYWdJbWFnZTogc3RyaW5nIHwgRHJhZ0ltYWdlIHwgRnVuY3Rpb247XG5cbiAgICBcbiAgICBASW5wdXQoKSBjbG9uZUl0ZW06IGJvb2xlYW47XG5cbiAgICBjb25zdHJ1Y3RvcihlbGVtUmVmOiBFbGVtZW50UmVmLCBkcmFnRHJvcFNlcnZpY2U6IERyYWdEcm9wU2VydmljZSwgY29uZmlnOkRyYWdEcm9wQ29uZmlnLFxuICAgICAgICBjZHI6Q2hhbmdlRGV0ZWN0b3JSZWYpIHtcblxuICAgICAgICBzdXBlcihlbGVtUmVmLCBkcmFnRHJvcFNlcnZpY2UsIGNvbmZpZywgY2RyKTtcbiAgICAgICAgdGhpcy5fZGVmYXVsdEN1cnNvciA9IHRoaXMuX2VsZW0uc3R5bGUuY3Vyc29yO1xuICAgICAgICB0aGlzLmRyYWdFbmFibGVkID0gdHJ1ZTtcbiAgICB9XG5cbiAgICBfb25EcmFnU3RhcnRDYWxsYmFjayhldmVudDogTW91c2VFdmVudCkge1xuICAgICAgICB0aGlzLl9kcmFnRHJvcFNlcnZpY2UuaXNEcmFnZ2VkID0gdHJ1ZTtcbiAgICAgICAgdGhpcy5fZHJhZ0Ryb3BTZXJ2aWNlLmRyYWdEYXRhID0gdGhpcy5kcmFnRGF0YTtcbiAgICAgICAgdGhpcy5fZHJhZ0Ryb3BTZXJ2aWNlLm9uRHJhZ1N1Y2Nlc3NDYWxsYmFjayA9IHRoaXMub25EcmFnU3VjY2Vzc0NhbGxiYWNrO1xuICAgICAgICB0aGlzLl9lbGVtLmNsYXNzTGlzdC5hZGQodGhpcy5fY29uZmlnLm9uRHJhZ1N0YXJ0Q2xhc3MpO1xuICAgICAgICAvL1xuICAgICAgICB0aGlzLm9uRHJhZ1N0YXJ0LmVtaXQoe2RyYWdEYXRhOiB0aGlzLmRyYWdEYXRhLCBtb3VzZUV2ZW50OiBldmVudH0pO1xuICAgIH1cblxuICAgIF9vbkRyYWdFbmRDYWxsYmFjayhldmVudDogTW91c2VFdmVudCkge1xuICAgICAgICB0aGlzLl9kcmFnRHJvcFNlcnZpY2UuaXNEcmFnZ2VkID0gZmFsc2U7XG4gICAgICAgIHRoaXMuX2RyYWdEcm9wU2VydmljZS5kcmFnRGF0YSA9IG51bGw7XG4gICAgICAgIHRoaXMuX2RyYWdEcm9wU2VydmljZS5vbkRyYWdTdWNjZXNzQ2FsbGJhY2sgPSBudWxsO1xuICAgICAgICB0aGlzLl9lbGVtLmNsYXNzTGlzdC5yZW1vdmUodGhpcy5fY29uZmlnLm9uRHJhZ1N0YXJ0Q2xhc3MpO1xuICAgICAgICAvL1xuICAgICAgICB0aGlzLm9uRHJhZ0VuZC5lbWl0KHtkcmFnRGF0YTogdGhpcy5kcmFnRGF0YSwgbW91c2VFdmVudDogZXZlbnR9KTtcbiAgICB9XG59XG5cblxuQERpcmVjdGl2ZSh7IHNlbGVjdG9yOiAnW2RuZC1kcmFnZ2FibGUtaGFuZGxlXScgfSlcbmV4cG9ydCBjbGFzcyBEcmFnZ2FibGVIYW5kbGVDb21wb25lbnQgZXh0ZW5kcyBBYnN0cmFjdEhhbmRsZUNvbXBvbmVudCB7XG4gICAgY29uc3RydWN0b3IoZWxlbVJlZjogRWxlbWVudFJlZiwgZHJhZ0Ryb3BTZXJ2aWNlOiBEcmFnRHJvcFNlcnZpY2UsIGNvbmZpZzpEcmFnRHJvcENvbmZpZywgX0NvbXBvbmVudDogRHJhZ2dhYmxlQ29tcG9uZW50LFxuICAgICAgICBjZHI6Q2hhbmdlRGV0ZWN0b3JSZWYpIHtcblxuICAgICAgICBzdXBlcihlbGVtUmVmLCBkcmFnRHJvcFNlcnZpY2UsIGNvbmZpZywgX0NvbXBvbmVudCwgY2RyKTtcbiAgICB9XG59XG4iXX0=