diff --git a/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html
index 1a5cc482f3..6342702eac 100644
--- a/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html
+++ b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html
@@ -1,5 +1,5 @@
 <h1>DataTable Drag and Drop Demo</h1>
-<div
+<div data-automation-id="datatable"
     (header-drop)="onDrop($event)"
     (cell-drop)="onDrop($event)">
     <adf-datatable [data]="data"></adf-datatable>
diff --git a/e2e/core/datatable/data-table-component.e2e.ts b/e2e/core/datatable/data-table-component.e2e.ts
index 639af112f2..90933fe189 100644
--- a/e2e/core/datatable/data-table-component.e2e.ts
+++ b/e2e/core/datatable/data-table-component.e2e.ts
@@ -24,16 +24,25 @@ import TestConfig = require('../../test.config');
 import { AlfrescoApiCompatibility as AlfrescoApi } from '@alfresco/js-api';
 import { NavigationBarPage } from '../../pages/adf/navigationBarPage';
 import { NotificationPage } from '../../pages/adf/notificationPage';
+import { DropActions } from '../../actions/drop.actions';
+import resources = require('../../util/resources');
+import { FileModel } from '../../models/ACS/fileModel';
 
 describe('Datatable component', () => {
 
     const dataTablePage = new DataTablePage('defaultTable');
     const copyContentDataTablePage = new DataTablePage('copyClipboardDataTable');
+    const dragAndDropDataTablePage = new DataTablePage();
     const loginPage = new LoginPage();
     const acsUser = new AcsUserModel();
     const navigationBarPage = new NavigationBarPage();
     const dataTableComponent = new DataTableComponentPage();
     const notificationPage = new NotificationPage();
+    const dragAndDrop = new DropActions();
+    const pngFile = new FileModel({
+        'name': resources.Files.ADF_DOCUMENTS.PNG.file_name,
+        'location': resources.Files.ADF_DOCUMENTS.PNG.file_location
+    });
 
     beforeAll(async (done) => {
         this.alfrescoJsApi = new AlfrescoApi({
@@ -190,4 +199,23 @@ describe('Datatable component', () => {
             expect(copyContentDataTablePage.getClipboardInputText()).toContain(jsonValue);
         });
     });
+
+    describe('Datatable component - Drag and Drop', () => {
+
+        beforeAll(async (done) => {
+            navigationBarPage.navigateToDragAndDropDatatable();
+            done();
+        });
+
+        it('[C307984] Should trigger the event handling header-drop and cell-drop', () => {
+            const dragAndDropHeader = dragAndDropDataTablePage.getDropTargetIdColumnHeader();
+            dragAndDrop.dropFile(dragAndDropHeader, pngFile.location);
+            notificationPage.checkNotifyContains('Dropped data on [ id ] header');
+            notificationPage.checkNotificationSnackBarIsNotDisplayed();
+
+            const dragAndDropCell = dragAndDropDataTablePage.getDropTargetIdColumnCell(1);
+            dragAndDrop.dropFile(dragAndDropCell, pngFile.location);
+            notificationPage.checkNotifyContains('Dropped data on [ id ] cell');
+        });
+    });
 });
diff --git a/e2e/pages/adf/demo-shell/dataTablePage.ts b/e2e/pages/adf/demo-shell/dataTablePage.ts
index 2f9877b713..646f9192f2 100644
--- a/e2e/pages/adf/demo-shell/dataTablePage.ts
+++ b/e2e/pages/adf/demo-shell/dataTablePage.ts
@@ -45,6 +45,7 @@ export class DataTablePage {
     replaceRowsElement = element(by.xpath(`//span[contains(text(),'Replace rows')]/..`));
     replaceColumnsElement = element(by.xpath(`//span[contains(text(),'Replace columns')]/..`));
     createdOnColumn = element(by.css(`div[data-automation-id='auto_id_createdOn']`));
+    idColumnHeader = element(by.css(`div[data-automation-id='auto_id_id']`));
     pasteClipboardInput = element(by.css(`input[data-automation-id='paste clipboard input']`));
 
     constructor(data?) {
@@ -167,6 +168,14 @@ export class DataTablePage {
         return this.dataTable.mouseOverElement(this.dataTable.getCellByRowNumberAndColumnName(rowNumber - 1, this.columns.json));
     }
 
+    getDropTargetIdColumnCell(rowNumber) {
+        return this.dataTable.getCellByRowNumberAndColumnName(rowNumber - 1, this.columns.id);
+    }
+
+    getDropTargetIdColumnHeader() {
+        return this.idColumnHeader;
+    }
+
     clickOnIdColumn(name) {
         return this.dataTable.clickColumn(this.columns.id, name);
     }
diff --git a/e2e/pages/adf/navigationBarPage.ts b/e2e/pages/adf/navigationBarPage.ts
index d90e02bf29..ddb66483d7 100644
--- a/e2e/pages/adf/navigationBarPage.ts
+++ b/e2e/pages/adf/navigationBarPage.ts
@@ -29,6 +29,7 @@ export class NavigationBarPage {
     dataTableButton = element(by.css('a[data-automation-id="Datatable"]'));
     dataTableNestedButton = element(by.css('button[data-automation-id="Datatable"]'));
     dataTableCopyContentButton = element(by.css('button[data-automation-id="Copy Content"]'));
+    dataTableDragAndDropButton = element(by.css('button[data-automation-id="Drag and Drop"]'));
     taskListButton = element(by.css("a[data-automation-id='Task List']"));
     configEditorButton = element(by.css('a[data-automation-id="Configuration Editor"]'));
     processServicesButton = element(by.css('a[data-automation-id="Process Services"]'));
@@ -74,6 +75,13 @@ export class NavigationBarPage {
         this.dataTableCopyContentButton.click();
     }
 
+    navigateToDragAndDropDatatable() {
+        BrowserVisibility.waitUntilElementIsVisible(this.dataTableButton);
+        this.dataTableButton.click();
+        BrowserVisibility.waitUntilElementIsVisible(this.dataTableDragAndDropButton);
+        this.dataTableDragAndDropButton.click();
+    }
+
     clickContentServicesButton() {
         BrowserVisibility.waitUntilElementIsVisible(this.contentServicesButton);
         this.contentServicesButton.click();