@ks89/ngx-drag-n-drop
Version:
Drag and drop library for Angular
87 lines • 10.5 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 DragDirective {
constructor(renderer, el, dragDropDirectiveService) {
this.renderer = renderer;
this.el = el;
this.dragDropDirectiveService = dragDropDirectiveService;
this.releaseDrop = new EventEmitter();
this.startDrag = new EventEmitter();
this.highlighted = false;
this.renderer.setAttribute(this.el.nativeElement, 'draggable', 'true');
}
onMouseEnter() {
this.highlight();
}
onMouseOut() {
this.highlight();
}
onDragStart(event) {
// html draggable will not transfer an object, so we stringify it
const transferObject = { object: this.draggedItem, id: 'dragDirectiveID-' + new Date().getTime() };
const transferObjectString = JSON.stringify(transferObject);
event.dataTransfer.setData('text', transferObjectString);
this.dragDropDirectiveService.setDragItem(this.draggedItem);
this.dropSubscription = this.dragDropDirectiveService.getDropItem().subscribe(item => {
this.emitDraggedItem(this.draggedItem);
});
this.startDrag.emit(this.draggedItem);
}
onDragEnd() {
if (typeof this.dropSubscription !== 'undefined') {
this.dropSubscription.unsubscribe();
}
}
ngOnDestroy() {
if (typeof this.dropSubscription !== 'undefined') {
this.dropSubscription.unsubscribe();
}
}
emitDraggedItem(item) {
this.releaseDrop.emit(item);
if (this.dropSubscription) {
this.dropSubscription.unsubscribe();
}
}
highlight() {
if (this.dragHighlight) {
if (!this.highlighted) {
this.renderer.addClass(this.el.nativeElement, this.dragHighlight);
}
else {
this.renderer.removeClass(this.el.nativeElement, this.dragHighlight);
}
}
this.highlighted = !this.highlighted;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDirective, 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: DragDirective, selector: "[ksDragDirective]", inputs: { draggedItem: "draggedItem", dragHighlight: "dragHighlight" }, outputs: { releaseDrop: "releaseDrop", startDrag: "startDrag" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseOut()", "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDirective, decorators: [{
type: Directive,
args: [{
selector: '[ksDragDirective]'
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.DragDropDirectiveService }], propDecorators: { draggedItem: [{
type: Input
}], dragHighlight: [{
type: Input
}], releaseDrop: [{
type: Output
}], startDrag: [{
type: Output
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseOut: [{
type: HostListener,
args: ['mouseleave']
}], onDragStart: [{
type: HostListener,
args: ['dragstart', ['$event']]
}], onDragEnd: [{
type: HostListener,
args: ['dragend']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZy1kaXJlY3RpdmUuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva3M4OS9uZ3gtZHJhZy1uLWRyb3Avc3JjL2xpYi9kcmFnLWRpcmVjdGl2ZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQWEsTUFBTSxlQUFlLENBQUM7OztBQU92SCxNQUFNLE9BQU8sYUFBYTtJQVN4QixZQUNVLFFBQW1CLEVBQ25CLEVBQWMsRUFDZCx3QkFBa0Q7UUFGbEQsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNuQixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2QsNkJBQXdCLEdBQXhCLHdCQUF3QixDQUEwQjtRQVRsRCxnQkFBVyxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3BELGNBQVMsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVwRCxnQkFBVyxHQUFHLEtBQUssQ0FBQztRQVExQixJQUFJLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxXQUFXLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFDekUsQ0FBQztJQUUyQixZQUFZO1FBQ3RDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRTJCLFVBQVU7UUFDcEMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFc0MsV0FBVyxDQUFDLEtBQVU7UUFDM0QsaUVBQWlFO1FBQ2pFLE1BQU0sY0FBYyxHQUFHLEVBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxXQUFXLEVBQUUsRUFBRSxFQUFFLGtCQUFrQixHQUFHLElBQUksSUFBSSxFQUFFLENBQUMsT0FBTyxFQUFFLEVBQUMsQ0FBQztRQUNqRyxNQUFNLG9CQUFvQixHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDNUQsS0FBSyxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLG9CQUFvQixDQUFDLENBQUM7UUFDekQsSUFBSSxDQUFDLHdCQUF3QixDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDNUQsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxTQUFTLENBQzNFLElBQUksQ0FBQyxFQUFFO1lBQ0wsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDekMsQ0FBQyxDQUNGLENBQUM7UUFDRixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUV3QixTQUFTO1FBQ2hDLElBQUksT0FBTyxJQUFJLENBQUMsZ0JBQWdCLEtBQUssV0FBVyxFQUFFLENBQUM7WUFDakQsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3RDLENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksT0FBTyxJQUFJLENBQUMsZ0JBQWdCLEtBQUssV0FBVyxFQUFFLENBQUM7WUFDakQsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3RDLENBQUM7SUFDSCxDQUFDO0lBRU8sZUFBZSxDQUFDLElBQVM7UUFDL0IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDNUIsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztZQUMxQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDdEMsQ0FBQztJQUNILENBQUM7SUFFTyxTQUFTO1FBQ2YsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztnQkFDdEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3BFLENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDdkUsQ0FBQztRQUNILENBQUM7UUFDRCxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUN2QyxDQUFDOzhHQW5FVSxhQUFhO2tHQUFiLGFBQWE7OzJGQUFiLGFBQWE7a0JBSHpCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG1CQUFtQjtpQkFDOUI7OElBRVUsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csU0FBUztzQkFBbEIsTUFBTTtnQkFhcUIsWUFBWTtzQkFBdkMsWUFBWTt1QkFBQyxZQUFZO2dCQUlFLFVBQVU7c0JBQXJDLFlBQVk7dUJBQUMsWUFBWTtnQkFJYSxXQUFXO3NCQUFqRCxZQUFZO3VCQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFjWixTQUFTO3NCQUFqQyxZQUFZO3VCQUFDLFNBQVMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25EZXN0cm95LCBPdXRwdXQsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRHJhZ0Ryb3BEaXJlY3RpdmVTZXJ2aWNlIH0gZnJvbSAnLi9kcmFnLWRyb3AtZGlyZWN0aXZlLnNlcnZpY2UnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1trc0RyYWdEaXJlY3RpdmVdJ1xufSlcbmV4cG9ydCBjbGFzcyBEcmFnRGlyZWN0aXZlIGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgQElucHV0KCkgZHJhZ2dlZEl0ZW06IGFueTtcbiAgQElucHV0KCkgZHJhZ0hpZ2hsaWdodDogc3RyaW5nIHwgdW5kZWZpbmVkOyAvLyBjc3NIaWdobGlnaHRcbiAgQE91dHB1dCgpIHJlbGVhc2VEcm9wOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIHN0YXJ0RHJhZzogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgcHJpdmF0ZSBoaWdobGlnaHRlZCA9IGZhbHNlO1xuICBwcml2YXRlIGRyb3BTdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbiB8IHVuZGVmaW5lZDtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgcHJpdmF0ZSBlbDogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIGRyYWdEcm9wRGlyZWN0aXZlU2VydmljZTogRHJhZ0Ryb3BEaXJlY3RpdmVTZXJ2aWNlXG4gICkge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2RyYWdnYWJsZScsICd0cnVlJyk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdtb3VzZWVudGVyJykgb25Nb3VzZUVudGVyKCkge1xuICAgIHRoaXMuaGlnaGxpZ2h0KCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdtb3VzZWxlYXZlJykgb25Nb3VzZU91dCgpIHtcbiAgICB0aGlzLmhpZ2hsaWdodCgpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZHJhZ3N0YXJ0JywgWyckZXZlbnQnXSkgb25EcmFnU3RhcnQoZXZlbnQ6IGFueSkge1xuICAgIC8vIGh0bWwgZHJhZ2dhYmxlIHdpbGwgbm90IHRyYW5zZmVyIGFuIG9iamVjdCwgc28gd2Ugc3RyaW5naWZ5IGl0XG4gICAgY29uc3QgdHJhbnNmZXJPYmplY3QgPSB7b2JqZWN0OiB0aGlzLmRyYWdnZWRJdGVtLCBpZDogJ2RyYWdEaXJlY3RpdmVJRC0nICsgbmV3IERhdGUoKS5nZXRUaW1lKCl9O1xuICAgIGNvbnN0IHRyYW5zZmVyT2JqZWN0U3RyaW5nID0gSlNPTi5zdHJpbmdpZnkodHJhbnNmZXJPYmplY3QpO1xuICAgIGV2ZW50LmRhdGFUcmFuc2Zlci5zZXREYXRhKCd0ZXh0JywgdHJhbnNmZXJPYmplY3RTdHJpbmcpO1xuICAgIHRoaXMuZHJhZ0Ryb3BEaXJlY3RpdmVTZXJ2aWNlLnNldERyYWdJdGVtKHRoaXMuZHJhZ2dlZEl0ZW0pO1xuICAgIHRoaXMuZHJvcFN1YnNjcmlwdGlvbiA9IHRoaXMuZHJhZ0Ryb3BEaXJlY3RpdmVTZXJ2aWNlLmdldERyb3BJdGVtKCkuc3Vic2NyaWJlKFxuICAgICAgaXRlbSA9PiB7XG4gICAgICAgIHRoaXMuZW1pdERyYWdnZWRJdGVtKHRoaXMuZHJhZ2dlZEl0ZW0pO1xuICAgICAgfVxuICAgICk7XG4gICAgdGhpcy5zdGFydERyYWcuZW1pdCh0aGlzLmRyYWdnZWRJdGVtKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RyYWdlbmQnKSBvbkRyYWdFbmQoKSB7XG4gICAgaWYgKHR5cGVvZiB0aGlzLmRyb3BTdWJzY3JpcHRpb24gIT09ICd1bmRlZmluZWQnKSB7XG4gICAgICB0aGlzLmRyb3BTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBpZiAodHlwZW9mIHRoaXMuZHJvcFN1YnNjcmlwdGlvbiAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgIHRoaXMuZHJvcFN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZW1pdERyYWdnZWRJdGVtKGl0ZW06IGFueSkge1xuICAgIHRoaXMucmVsZWFzZURyb3AuZW1pdChpdGVtKTtcbiAgICBpZiAodGhpcy5kcm9wU3Vic2NyaXB0aW9uKSB7XG4gICAgICB0aGlzLmRyb3BTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGhpZ2hsaWdodCgpIHtcbiAgICBpZiAodGhpcy5kcmFnSGlnaGxpZ2h0KSB7XG4gICAgICBpZiAoIXRoaXMuaGlnaGxpZ2h0ZWQpIHtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHRoaXMuZHJhZ0hpZ2hsaWdodCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUNsYXNzKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgdGhpcy5kcmFnSGlnaGxpZ2h0KTtcbiAgICAgIH1cbiAgICB9XG4gICAgdGhpcy5oaWdobGlnaHRlZCA9ICF0aGlzLmhpZ2hsaWdodGVkO1xuICB9XG59XG4iXX0=