@ks89/ngx-drag-n-drop
Version:
Drag and drop library for Angular
87 lines • 10.6 kB
JavaScript
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "./drag-drop-directive.service";
export class DropDirective {
constructor(renderer, el, dragDropDirectiveService) {
this.renderer = renderer;
this.el = el;
this.dragDropDirectiveService = dragDropDirectiveService;
this.dropEvent = new EventEmitter();
this.dragenterEvent = new EventEmitter();
this.dragleaveEvent = new EventEmitter();
this.dropEventMouse = new EventEmitter();
this.highlighted = false;
}
onDragEnter() {
this.dragItem = this.dragDropDirectiveService.getDragItem();
this.dragenterEvent.emit(this.dragItem);
// this.highlighted = true;
this.highlight();
}
onDragLeave() {
this.dragItem = this.dragDropDirectiveService.getDragItem();
this.dragleaveEvent.emit(this.dragItem);
// this.highlighted = false;
this.highlight();
}
onDragOver(event) {
event.preventDefault();
}
onDrop(event) {
// check to see if we are getting what was sent. text/plain
const eventData = event.dataTransfer.getData('text');
if (eventData && event.dataTransfer.files.length === 0) {
event.preventDefault();
// since html draggable will not transfer an object, we need to parse are string
const transferredObjectString = JSON.parse(eventData);
const transferredObjectID = transferredObjectString.id;
const transferredObject = transferredObjectString.object;
this.dropEvent.emit(transferredObject);
this.dragDropDirectiveService.setDropItem(transferredObjectID);
}
this.dropEventMouse.emit(event);
this.highlight();
}
highlight() {
if (this.dropHighlight) {
if (!this.highlighted) {
this.renderer.addClass(this.el.nativeElement, this.dropHighlight);
}
else {
this.renderer.removeClass(this.el.nativeElement, this.dropHighlight);
}
}
this.highlighted = !this.highlighted;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DropDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.DragDropDirectiveService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: DropDirective, selector: "[ksDropDirective]", inputs: { dropHighlight: "dropHighlight" }, outputs: { dropEvent: "dropEvent", dragenterEvent: "dragenterEvent", dragleaveEvent: "dragleaveEvent", dropEventMouse: "dropEventMouse" }, host: { listeners: { "dragenter": "onDragEnter()", "dragleave": "onDragLeave()", "dragover": "onDragOver($event)", "drop": "onDrop($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DropDirective, decorators: [{
type: Directive,
args: [{
selector: '[ksDropDirective]'
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.DragDropDirectiveService }], propDecorators: { dropHighlight: [{
type: Input
}], dropEvent: [{
type: Output
}], dragenterEvent: [{
type: Output
}], dragleaveEvent: [{
type: Output
}], dropEventMouse: [{
type: Output
}], onDragEnter: [{
type: HostListener,
args: ['dragenter']
}], onDragLeave: [{
type: HostListener,
args: ['dragleave']
}], onDragOver: [{
type: HostListener,
args: ['dragover', ['$event']]
}], onDrop: [{
type: HostListener,
args: ['drop', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcC1kaXJlY3RpdmUuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva3M4OS9uZ3gtZHJhZy1uLWRyb3Avc3JjL2xpYi9kcm9wLWRpcmVjdGl2ZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWEsTUFBTSxlQUFlLENBQUM7OztBQU81RyxNQUFNLE9BQU8sYUFBYTtJQVd4QixZQUNVLFFBQW1CLEVBQ25CLEVBQWMsRUFDZCx3QkFBa0Q7UUFGbEQsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNuQixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2QsNkJBQXdCLEdBQXhCLHdCQUF3QixDQUEwQjtRQVhsRCxjQUFTLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDbEQsbUJBQWMsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUN2RCxtQkFBYyxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3ZELG1CQUFjLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFekQsZ0JBQVcsR0FBRyxLQUFLLENBQUM7SUFRNUIsQ0FBQztJQUUwQixXQUFXO1FBQ3BDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQzVELElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN4QywyQkFBMkI7UUFDM0IsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFMEIsV0FBVztRQUNwQyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUM1RCxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDeEMsNEJBQTRCO1FBQzVCLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRXFDLFVBQVUsQ0FBQyxLQUFVO1FBQ3pELEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRWlDLE1BQU0sQ0FBQyxLQUFVO1FBQ2pELDJEQUEyRDtRQUMzRCxNQUFNLFNBQVMsR0FBUSxLQUFLLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMxRCxJQUFJLFNBQVMsSUFBSSxLQUFLLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDdkQsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLGdGQUFnRjtZQUNoRixNQUFNLHVCQUF1QixHQUFRLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUM7WUFDM0QsTUFBTSxtQkFBbUIsR0FBUSx1QkFBdUIsQ0FBQyxFQUFFLENBQUM7WUFDNUQsTUFBTSxpQkFBaUIsR0FBUSx1QkFBdUIsQ0FBQyxNQUFNLENBQUM7WUFDOUQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQztZQUN2QyxJQUFJLENBQUMsd0JBQXdCLENBQUMsV0FBVyxDQUFDLG1CQUFtQixDQUFDLENBQUM7UUFDakUsQ0FBQztRQUNELElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2hDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRU8sU0FBUztRQUNmLElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7Z0JBQ3RCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztZQUNwRSxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3ZFLENBQUM7UUFDSCxDQUFDO1FBQ0QsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDdkMsQ0FBQzs4R0E3RFUsYUFBYTtrR0FBYixhQUFhOzsyRkFBYixhQUFhO2tCQUh6QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxtQkFBbUI7aUJBQzlCOzhJQUVVLGFBQWE7c0JBQXJCLEtBQUs7Z0JBRUksU0FBUztzQkFBbEIsTUFBTTtnQkFDRyxjQUFjO3NCQUF2QixNQUFNO2dCQUNHLGNBQWM7c0JBQXZCLE1BQU07Z0JBQ0csY0FBYztzQkFBdkIsTUFBTTtnQkFZb0IsV0FBVztzQkFBckMsWUFBWTt1QkFBQyxXQUFXO2dCQU9FLFdBQVc7c0JBQXJDLFlBQVk7dUJBQUMsV0FBVztnQkFPYSxVQUFVO3NCQUEvQyxZQUFZO3VCQUFDLFVBQVUsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFJRixNQUFNO3NCQUF2QyxZQUFZO3VCQUFDLE1BQU0sRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPdXRwdXQsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBEcmFnRHJvcERpcmVjdGl2ZVNlcnZpY2UgfSBmcm9tICcuL2RyYWctZHJvcC1kaXJlY3RpdmUuc2VydmljZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1trc0Ryb3BEaXJlY3RpdmVdJ1xufSlcbmV4cG9ydCBjbGFzcyBEcm9wRGlyZWN0aXZlIHtcbiAgQElucHV0KCkgZHJvcEhpZ2hsaWdodDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIEBPdXRwdXQoKSBkcm9wRXZlbnQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgZHJhZ2VudGVyRXZlbnQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgZHJhZ2xlYXZlRXZlbnQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgZHJvcEV2ZW50TW91c2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIHByaXZhdGUgaGlnaGxpZ2h0ZWQgPSBmYWxzZTtcbiAgcHJpdmF0ZSBkcmFnSXRlbTogYW55O1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgICBwcml2YXRlIGVsOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgZHJhZ0Ryb3BEaXJlY3RpdmVTZXJ2aWNlOiBEcmFnRHJvcERpcmVjdGl2ZVNlcnZpY2VcbiAgKSB7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkcmFnZW50ZXInKSBvbkRyYWdFbnRlcigpIHtcbiAgICB0aGlzLmRyYWdJdGVtID0gdGhpcy5kcmFnRHJvcERpcmVjdGl2ZVNlcnZpY2UuZ2V0RHJhZ0l0ZW0oKTtcbiAgICB0aGlzLmRyYWdlbnRlckV2ZW50LmVtaXQodGhpcy5kcmFnSXRlbSk7XG4gICAgLy8gdGhpcy5oaWdobGlnaHRlZCA9IHRydWU7XG4gICAgdGhpcy5oaWdobGlnaHQoKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RyYWdsZWF2ZScpIG9uRHJhZ0xlYXZlKCkge1xuICAgIHRoaXMuZHJhZ0l0ZW0gPSB0aGlzLmRyYWdEcm9wRGlyZWN0aXZlU2VydmljZS5nZXREcmFnSXRlbSgpO1xuICAgIHRoaXMuZHJhZ2xlYXZlRXZlbnQuZW1pdCh0aGlzLmRyYWdJdGVtKTtcbiAgICAvLyB0aGlzLmhpZ2hsaWdodGVkID0gZmFsc2U7XG4gICAgdGhpcy5oaWdobGlnaHQoKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RyYWdvdmVyJywgWyckZXZlbnQnXSkgb25EcmFnT3ZlcihldmVudDogYW55KSB7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2Ryb3AnLCBbJyRldmVudCddKSBvbkRyb3AoZXZlbnQ6IGFueSkge1xuICAgIC8vIGNoZWNrIHRvIHNlZSBpZiB3ZSBhcmUgZ2V0dGluZyB3aGF0IHdhcyBzZW50LiB0ZXh0L3BsYWluXG4gICAgY29uc3QgZXZlbnREYXRhOiBhbnkgPSBldmVudC5kYXRhVHJhbnNmZXIuZ2V0RGF0YSgndGV4dCcpO1xuICAgIGlmIChldmVudERhdGEgJiYgZXZlbnQuZGF0YVRyYW5zZmVyLmZpbGVzLmxlbmd0aCA9PT0gMCkge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIC8vIHNpbmNlIGh0bWwgZHJhZ2dhYmxlIHdpbGwgbm90IHRyYW5zZmVyIGFuIG9iamVjdCwgd2UgbmVlZCB0byBwYXJzZSBhcmUgc3RyaW5nXG4gICAgICBjb25zdCB0cmFuc2ZlcnJlZE9iamVjdFN0cmluZzogYW55ID0gSlNPTi5wYXJzZShldmVudERhdGEpO1xuICAgICAgY29uc3QgdHJhbnNmZXJyZWRPYmplY3RJRDogYW55ID0gdHJhbnNmZXJyZWRPYmplY3RTdHJpbmcuaWQ7XG4gICAgICBjb25zdCB0cmFuc2ZlcnJlZE9iamVjdDogYW55ID0gdHJhbnNmZXJyZWRPYmplY3RTdHJpbmcub2JqZWN0O1xuICAgICAgdGhpcy5kcm9wRXZlbnQuZW1pdCh0cmFuc2ZlcnJlZE9iamVjdCk7XG4gICAgICB0aGlzLmRyYWdEcm9wRGlyZWN0aXZlU2VydmljZS5zZXREcm9wSXRlbSh0cmFuc2ZlcnJlZE9iamVjdElEKTtcbiAgICB9XG4gICAgdGhpcy5kcm9wRXZlbnRNb3VzZS5lbWl0KGV2ZW50KTtcbiAgICB0aGlzLmhpZ2hsaWdodCgpO1xuICB9XG5cbiAgcHJpdmF0ZSBoaWdobGlnaHQoKSB7XG4gICAgaWYgKHRoaXMuZHJvcEhpZ2hsaWdodCkge1xuICAgICAgaWYgKCF0aGlzLmhpZ2hsaWdodGVkKSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuYWRkQ2xhc3ModGhpcy5lbC5uYXRpdmVFbGVtZW50LCB0aGlzLmRyb3BIaWdobGlnaHQpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDbGFzcyh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHRoaXMuZHJvcEhpZ2hsaWdodCk7XG4gICAgICB9XG4gICAgfVxuICAgIHRoaXMuaGlnaGxpZ2h0ZWQgPSAhdGhpcy5oaWdobGlnaHRlZDtcbiAgfVxuXG59XG4iXX0=