diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index 8dd36c03c0..82785b92af 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -701,42 +701,6 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
const name = this.getNameColumnValue();
return name ? row.getValue(name.key) : '';
}
-
- onDragOver(event: Event) {
- event.preventDefault();
- }
-
- onHeaderDrop(event: Event, column: DataColumn) {
- event.preventDefault();
-
- this.elementRef.nativeElement.dispatchEvent(
- new CustomEvent('header-drop', {
- detail: {
- target: 'header',
- event,
- column
- },
- bubbles: true
- })
- );
- }
-
- onCellDrop(event: Event, column: DataColumn, row: DataRow) {
- event.preventDefault();
-
- this.elementRef.nativeElement.dispatchEvent(
- new CustomEvent('cell-drop', {
- detail: {
- target: 'cell',
- event,
- column,
- row
- },
- bubbles: true
- })
- );
- }
-
}
export interface DataTableDropEvent {
diff --git a/lib/core/datatable/components/datatable/drop-zone.directive.ts b/lib/core/datatable/components/datatable/drop-zone.directive.ts
new file mode 100644
index 0000000000..9097e02d80
--- /dev/null
+++ b/lib/core/datatable/components/datatable/drop-zone.directive.ts
@@ -0,0 +1,90 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Directive, Input, ElementRef, NgZone, OnInit, OnDestroy } from '@angular/core';
+import { DataRow } from '../../data/data-row.model';
+import { DataColumn } from '../../data/data-column.model';
+
+@Directive({
+ selector: '[adf-drop-zone]'
+})
+export class DropZoneDirective implements OnInit, OnDestroy {
+ private element: HTMLElement;
+
+ @Input()
+ dropTarget: 'header' | 'cell' = 'cell';
+
+ @Input()
+ dropRow: DataRow;
+
+ @Input()
+ dropColumn: DataColumn;
+
+ constructor(elementRef: ElementRef, private ngZone: NgZone) {
+ this.element = elementRef.nativeElement;
+ }
+
+ ngOnInit() {
+ this.ngZone.runOutsideAngular(() => {
+ this.element.addEventListener('dragover', this.onDragOver.bind(this));
+ this.element.addEventListener('drop', this.onDrop.bind(this));
+ });
+ }
+
+ ngOnDestroy() {
+ this.element.removeEventListener('dragover', this.onDragOver);
+ this.element.removeEventListener('drop', this.onDrop);
+ }
+
+ onDragOver(event: Event) {
+ const domEvent = new CustomEvent(`${this.dropTarget}-dragover`, {
+ detail: {
+ target: this.dropTarget,
+ event,
+ column: this.dropColumn,
+ row: this.dropRow
+ },
+ bubbles: true
+ });
+
+ this.element.dispatchEvent(domEvent);
+
+ if (domEvent.defaultPrevented) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+
+ onDrop(event: Event) {
+ const domEvent = new CustomEvent(`${this.dropTarget}-drop`, {
+ detail: {
+ target: this.dropTarget,
+ event,
+ column: this.dropColumn,
+ row: this.dropRow
+ },
+ bubbles: true
+ });
+
+ this.element.dispatchEvent(domEvent);
+
+ if (domEvent.defaultPrevented) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+}
diff --git a/lib/core/datatable/datatable.module.ts b/lib/core/datatable/datatable.module.ts
index 3b1c21abd2..23611bc2e1 100644
--- a/lib/core/datatable/datatable.module.ts
+++ b/lib/core/datatable/datatable.module.ts
@@ -42,6 +42,7 @@ import { CustomLoadingContentTemplateDirective } from './directives/custom-loadi
import { CustomNoPermissionTemplateDirective } from './directives/custom-no-permission-template.directive';
import { JsonCellComponent } from './components/datatable/json-cell.component';
import { ClipboardModule } from '../clipboard/clipboard.module';
+import { DropZoneDirective } from './components/datatable/drop-zone.directive';
@NgModule({
imports: [
@@ -70,7 +71,8 @@ import { ClipboardModule } from '../clipboard/clipboard.module';
LoadingContentTemplateDirective,
CustomEmptyContentTemplateDirective,
CustomLoadingContentTemplateDirective,
- CustomNoPermissionTemplateDirective
+ CustomNoPermissionTemplateDirective,
+ DropZoneDirective
],
exports: [
DataTableComponent,
@@ -88,7 +90,8 @@ import { ClipboardModule } from '../clipboard/clipboard.module';
LoadingContentTemplateDirective,
CustomEmptyContentTemplateDirective,
CustomLoadingContentTemplateDirective,
- CustomNoPermissionTemplateDirective
+ CustomNoPermissionTemplateDirective,
+ DropZoneDirective
]
})
diff --git a/lib/core/datatable/public-api.ts b/lib/core/datatable/public-api.ts
index 94a15b276c..35551ba887 100644
--- a/lib/core/datatable/public-api.ts
+++ b/lib/core/datatable/public-api.ts
@@ -28,7 +28,7 @@ export * from './data/object-datacolumn.model';
export * from './components/datatable/data-cell.event';
export * from './components/datatable/data-row-action.event';
-
+export * from './components/datatable/drop-zone.directive';
export * from './components/datatable/datatable-cell.component';
export * from './components/datatable/datatable.component';
export * from './components/datatable/date-cell.component';