Skip to content

Commit f5ba6d5

Browse files
onepartsamSamuel Lim
onepartsam
and
Samuel Lim
authored
Enable passing of DragEvent to gridstack dropped event (#1841)
* 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. Co-authored-by: Samuel Lim <samuel.lim@finantix.com>
1 parent 63c1048 commit f5ba6d5

File tree

3 files changed

+144
-1
lines changed

3 files changed

+144
-1
lines changed

‎demo/drag-and-drop-dataTransfer-angular.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/**
2+
* Simple Angular Example using GridStack API with event.dataTransfer
3+
*/
4+
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
5+
import { GridStack, GridStackWidget, GridStackNode } from 'gridstack';
6+
import { DDElement } from "gridstack/dist/h5/dd-element";
7+
import 'gridstack/dist/h5/gridstack-dd-native';
8+
9+
@Component({
10+
selector: 'grid-stack-test',
11+
template: `
12+
<div class="grid-stack-item" #dragElement>
13+
<div class="grid-stack-item-content" style="background-color: #cccccc; padding: 15px;">Drag Me</div>
14+
</div>
15+
<hr>
16+
<div class="grid-stack"></div>
17+
`,
18+
})
19+
export class GridStackTestComponent implements OnInit {
20+
21+
@ViewChild('dragElement') public dragElement: ElementRef<HTMLElement>;
22+
23+
private sampleElement = `<div style="background-color: #eeeeee; padding: 15px; height: 100%;">Sample Element</div>`;
24+
private items: GridStackWidget[] = [
25+
{ x: 0, y: 0, w: 9, h: 1, content: this.sampleElement },
26+
{ x: 9, y: 0, w: 3, h: 2, content: this.sampleElement }
27+
];
28+
private grid: GridStack;
29+
30+
constructor() { }
31+
public ngOnInit() {
32+
33+
const _ddElement = DDElement.init(this.dragElement.nativeElement);
34+
_ddElement.setupDraggable({
35+
handle: '.sample-drag',
36+
revert: 'invalid',
37+
scroll: true,
38+
appendTo: 'body',
39+
helper: 'clone',
40+
start: (event: DragEvent) => {
41+
if (event.dataTransfer) {
42+
event.dataTransfer.setData('message', 'Hello World');
43+
}
44+
},
45+
});
46+
47+
this.grid = GridStack.init({
48+
removable: true,
49+
acceptWidgets: (el) => {
50+
return true;
51+
}
52+
});
53+
54+
this.grid.on('dropped', this.gridStackDropped.bind(this));
55+
this.grid.load(this.items); // and load our content directly (will create DOM)
56+
}
57+
58+
gridStackDropped(event: Event, previousWidget: GridStackNode, newWidget: GridStackNode): void {
59+
const dragEvent = event as DragEvent;
60+
if (dragEvent.dataTransfer) {
61+
console.log('gridstack dropped: ', dragEvent.dataTransfer.getData('message'));
62+
}
63+
}
64+
}
65+

‎demo/drag-and-drop-dataTransfer.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>Event DataTransfer Demo</title>
9+
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
11+
<link rel="stylesheet" href="demo.css" />
12+
<link rel="stylesheet" href="../dist/gridstack-extra.css" />
13+
14+
<script src="../dist/gridstack-h5.js"></script>
15+
</head>
16+
17+
<body>
18+
<div class="container-fluid">
19+
<h1>Event DataTransfer Demo</h1>
20+
21+
<div class="row">
22+
<div class="col-md-3">
23+
<div class="sidebar">
24+
<div class="grid-stack-item">
25+
<div class="grid-stack-item-content">Drag me</div>
26+
</div>
27+
</div>
28+
</div>
29+
<div class="col-md-9">
30+
<div class="grid-stack grid-stack-12"></div>
31+
</div>
32+
</div>
33+
</div>
34+
<script type="text/javascript">
35+
let options = {
36+
column: 12,
37+
disableOneColumnMode: true,
38+
acceptWidgets: function (el) { return true; }
39+
};
40+
let items = [
41+
{ x: 0, y: 0, w: 9, h: 1, content: 'Sample Element' },
42+
{ x: 9, y: 0, w: 3, h: 2, content: 'Sample Element 2' }
43+
];
44+
45+
let grid = GridStack.init(options)
46+
47+
grid.load(items);
48+
49+
grid.on('dropped', function (event, previousWidget, newWidget) {
50+
if (event.dataTransfer) {
51+
console.log('gridstack dropped: ', event.dataTransfer.getData('message'));
52+
}
53+
});
54+
55+
GridStack.setupDragIn(
56+
'.sidebar .grid-stack-item',
57+
{
58+
revert: 'invalid',
59+
scroll: false,
60+
appendTo: 'body',
61+
helper: clone,
62+
start: start
63+
}
64+
);
65+
66+
function clone(event) {
67+
return event.target.cloneNode(true);
68+
}
69+
70+
function start(event) {
71+
if (event.dataTransfer) {
72+
event.dataTransfer.setData('message', 'Hello World');
73+
}
74+
}
75+
</script>
76+
</body>
77+
78+
</html>

‎src/gridstack-dd.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
277277

278278
this.engine.endUpdate();
279279
if (this._gsEventHandler['dropped']) {
280-
this._gsEventHandler['dropped']({type: 'dropped'}, origNode && origNode.grid ? origNode : undefined, node);
280+
this._gsEventHandler['dropped']({...event, type: 'dropped'}, origNode && origNode.grid ? origNode : undefined, node);
281281
}
282282

283283
// wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up

0 commit comments

Comments
 (0)