From a1b295b351ab4300b2f22194ba13e9008e36fdda Mon Sep 17 00:00:00 2001
From: Samuel Lim <samuel.lim@finantix.com>
Date: Fri, 3 Sep 2021 15:28:35 +0800
Subject: [PATCH 1/3] Enable passing of DragEvent to gridstack dropped event

Modification done to allow the passing of DragEvent to gridstack dropped event, allowing access to dataTransfer property. A demo in Angular has been included to showcase this new capability.
---
 demo/drag-drop-dataTransfer.ts | 65 ++++++++++++++++++++++++++++++++++
 src/gridstack-dd.ts            |  2 +-
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 demo/drag-drop-dataTransfer.ts

diff --git a/demo/drag-drop-dataTransfer.ts b/demo/drag-drop-dataTransfer.ts
new file mode 100644
index 000000000..02c3720f7
--- /dev/null
+++ b/demo/drag-drop-dataTransfer.ts
@@ -0,0 +1,65 @@
+/**
+ * Simple Angular Example using GridStack API with event.dataTransfer
+ */
+ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+ import { GridStack, GridStackWidget, GridStackNode } from 'gridstack';
+ import { DDElement } from "gridstack/dist/h5/dd-element";
+ import 'gridstack/dist/h5/gridstack-dd-native';
+ 
+ @Component({
+     selector: 'grid-stack-test',
+     template: `
+         <div class="grid-stack-item" #dragElement>
+             <div class="grid-stack-item-content" style="background-color: #cccccc; padding: 15px;">Drag Me</div>
+         </div>
+         <hr>
+         <div class="grid-stack"></div>
+      `,
+ })
+ export class GridStackTestComponent implements OnInit {
+ 
+     @ViewChild('dragElement') public dragElement: ElementRef<HTMLElement>;
+ 
+     private sampleElement = `<div style="background-color: #eeeeee; padding: 15px; height: 100%;">Sample Element</div>`;
+     private items: GridStackWidget[] = [
+         { x: 0, y: 0, w: 9, h: 1, content: this.sampleElement },
+         { x: 9, y: 0, w: 3, h: 2, content: this.sampleElement }
+     ];
+     private grid: GridStack;
+ 
+     constructor() { }
+     public ngOnInit() {
+ 
+         const _ddElement = DDElement.init(this.dragElement.nativeElement);
+         _ddElement.setupDraggable({
+             handle: '.sample-drag',
+             revert: 'invalid',
+             scroll: true,
+             appendTo: 'body',
+             helper: 'clone',
+             start: (event: DragEvent) => {
+                 if (event.dataTransfer) {
+                     event.dataTransfer.setData('message', 'Hello World');
+                 }
+             },
+         });
+ 
+         this.grid = GridStack.init({
+             removable: true,
+             acceptWidgets: (el) => {
+                 return true;
+             }
+         });
+ 
+         this.grid.on('dropped', this.gridStackDropped.bind(this));
+         this.grid.load(this.items); // and load our content directly (will create DOM)
+     }
+ 
+     gridStackDropped(event: Event, previousWidget: GridStackNode, newWidget: GridStackNode): void {
+         const dragEvent = event as DragEvent;
+         if (dragEvent.dataTransfer) {
+             console.log('gridstack dropped: ', dragEvent.dataTransfer.getData('message'));
+         }
+     }
+ }
+ 
\ No newline at end of file
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
index cad14f8f4..bb0aba783 100644
--- a/src/gridstack-dd.ts
+++ b/src/gridstack-dd.ts
@@ -277,7 +277,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
 
       this.engine.endUpdate();
       if (this._gsEventHandler['dropped']) {
-        this._gsEventHandler['dropped']({type: 'dropped'}, origNode && origNode.grid ? origNode : undefined, node);
+        this._gsEventHandler['dropped']({...event, type: 'dropped'}, origNode && origNode.grid ? origNode : undefined, node);
       }
 
       // wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up

From 20a913dc3dd4f70b19f4b3c0ad13f0b91a281f57 Mon Sep 17 00:00:00 2001
From: Samuel Lim <slyj91@gmail.com>
Date: Mon, 6 Sep 2021 14:49:54 +0800
Subject: [PATCH 2/3] Includes HTML example for dataTransfer

---
 demo/drop-drop-dataTransfer.html | 78 ++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 demo/drop-drop-dataTransfer.html

diff --git a/demo/drop-drop-dataTransfer.html b/demo/drop-drop-dataTransfer.html
new file mode 100644
index 000000000..ec12891d6
--- /dev/null
+++ b/demo/drop-drop-dataTransfer.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Event DataTransfer Demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="demo.css" />
+    <link rel="stylesheet" href="../dist/gridstack-extra.css" />
+
+    <script src="../dist/gridstack-h5.js"></script>
+</head>
+
+<body>
+    <div class="container-fluid">
+        <h1>Event DataTransfer Demo</h1>
+
+        <div class="row">
+            <div class="col-md-3">
+                <div class="sidebar">
+                    <div class="grid-stack-item">
+                        <div class="grid-stack-item-content">Drag me</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-9">
+                <div class="grid-stack grid-stack-12"></div>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript">
+        let options = {
+            column: 12,
+            disableOneColumnMode: true,
+            acceptWidgets: function (el) { return true; }
+        };
+        let items = [
+            { x: 0, y: 0, w: 9, h: 1, content: 'Sample Element' },
+            { x: 9, y: 0, w: 3, h: 2, content: 'Sample Element 2' }
+        ];
+
+        let grid = GridStack.init(options)
+
+        grid.load(items);
+
+        grid.on('dropped', function (event, previousWidget, newWidget) {
+            if (event.dataTransfer) {
+                console.log('gridstack dropped: ', event.dataTransfer.getData('message'));
+            }
+        });
+
+        GridStack.setupDragIn(
+            '.sidebar .grid-stack-item',
+            {
+                revert: 'invalid',
+                scroll: false,
+                appendTo: 'body',
+                helper: clone,
+                start: start
+            }
+        );
+
+        function clone(event) {
+            return event.target.cloneNode(true);
+        }
+
+        function start(event) {
+            if (event.dataTransfer) {
+                event.dataTransfer.setData('message', 'Hello World');
+            }
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file

From fcfc7a67f554a338d92b64e492babb874cc66a5c Mon Sep 17 00:00:00 2001
From: Samuel Lim <slyj91@gmail.com>
Date: Mon, 6 Sep 2021 15:43:08 +0800
Subject: [PATCH 3/3] Rename demo files

---
 ...drop-dataTransfer.ts => drag-and-drop-dataTransfer-angular.ts} | 0
 ...rop-drop-dataTransfer.html => drag-and-drop-dataTransfer.html} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename demo/{drag-drop-dataTransfer.ts => drag-and-drop-dataTransfer-angular.ts} (100%)
 rename demo/{drop-drop-dataTransfer.html => drag-and-drop-dataTransfer.html} (100%)

diff --git a/demo/drag-drop-dataTransfer.ts b/demo/drag-and-drop-dataTransfer-angular.ts
similarity index 100%
rename from demo/drag-drop-dataTransfer.ts
rename to demo/drag-and-drop-dataTransfer-angular.ts
diff --git a/demo/drop-drop-dataTransfer.html b/demo/drag-and-drop-dataTransfer.html
similarity index 100%
rename from demo/drop-drop-dataTransfer.html
rename to demo/drag-and-drop-dataTransfer.html