Skip to content

Commit 36483bf

Browse files
rhlinrhlin
authored
HTML5 DragDrop plugin implemented (#1376)
* feat(h5dd): add html 5 dragdrop & resize plugin & demo. * fix(h5dd): update for merge issue
1 parent cbc5218 commit 36483bf

File tree

12 files changed

+1276
-0
lines changed

12 files changed

+1276
-0
lines changed

‎demo/h5dragdrop.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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>Advanced grid 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+
13+
<script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
14+
<script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
15+
16+
<script src="../dist/gridstack.all.js"></script>
17+
18+
<style type="text/css">
19+
.grid-stack-item-removing {
20+
opacity: 0.8;
21+
filter: blur(5px);
22+
}
23+
24+
#trash {
25+
background: rgba(255, 0, 0, 0.4);
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<h1>Advanced Demo</h1>
32+
<div class="row">
33+
<div class="col-md-2 d-none d-md-block">
34+
<div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
35+
<div>
36+
<ion-icon name="trash" style="font-size: 300%"></ion-icon>
37+
</div>
38+
<div>
39+
<span>Drop here to remove!</span>
40+
</div>
41+
</div>
42+
<div class="newWidget grid-stack-item">
43+
<div class="grid-stack-item-content" style="padding: 5px;">
44+
<div>
45+
<ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
46+
</div>
47+
<div>
48+
<span>Drag me in the dashboard!</span>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
<div class="col-sm-12 col-md-10">
54+
<div class="grid-stack" data-gs-animate="yes">
55+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
56+
<div class="grid-stack-item-content">1</div>
57+
</div>
58+
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"
59+
data-gs-no-move="yes" data-gs-no-resize="yes" data-gs-locked="yes">
60+
<div class="grid-stack-item-content">I can't be moved or dragged!
61+
<br>
62+
<ion-icon name="ios-lock" style="font-size:300%"></ion-icon>
63+
</div>
64+
</div>
65+
<div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2"
66+
data-gs-min-width="2" data-gs-no-resize="yes">
67+
<div class="grid-stack-item-content" style="overflow: hidden">
68+
<p class="card-text text-center" style="margin-bottom: 0">
69+
Drag me!
70+
<p class="card-text text-center" style="margin-bottom: 0">
71+
<ion-icon name="hand" style="font-size: 300%"></ion-icon>
72+
<p class="card-text text-center" style="margin-bottom: 0">
73+
...but don't resize me!
74+
</div>
75+
</div>
76+
<div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2">
77+
<div class="grid-stack-item-content"> 4</div>
78+
</div>
79+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2">
80+
<div class="grid-stack-item-content">5</div>
81+
</div>
82+
<div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4">
83+
<div class="grid-stack-item-content">6</div>
84+
</div>
85+
<div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2">
86+
<div class="grid-stack-item-content">7</div>
87+
</div>
88+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
89+
<div class="grid-stack-item-content">8</div>
90+
</div>
91+
<div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
92+
<div class="grid-stack-item-content">9</div>
93+
</div>
94+
<div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2">
95+
<div class="grid-stack-item-content">10</div>
96+
</div>
97+
<div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2">
98+
<div class="grid-stack-item-content">11</div>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
104+
<script type="text/javascript">
105+
let grid = GridStack.init({
106+
alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
107+
navigator.userAgent
108+
),
109+
resizable: {
110+
autoHide: true,
111+
handles: 'e, se, s, sw, w'
112+
},
113+
acceptWidgets: true,
114+
dragIn: '.newWidget', // class that can be dragged from outside
115+
dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
116+
removable: '#trash', // drag-out delete class
117+
removeTimeout: 100,
118+
ddPlugin: GridStack.getDDPlugin(1)
119+
});
120+
121+
grid.on('added removed change', function(e, items) {
122+
let str = '';
123+
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
124+
console.log(e.type + ' ' + items.length + ' items:' + str );
125+
});
126+
</script>
127+
</body>
128+
129+
</html>

‎demo/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<h1>Demos</h1>
99
<ul>
1010
<li><a href="advance.html">Advance</a></li>
11+
<li><a href="h5dragdrop.html">Advance: use h5ddPlugin</a></li>
1112
<li><a href="anijs.html">AniJS</a></li>
1213
<li><a href="column.html">Column</a></li>
1314
<li><a href="float.html">Float grid</a></li>

‎src/dragdrop/dd-base-impl.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export type EventCallback = (event: Event) => boolean|void;
2+
export abstract class DDBaseImplement {
3+
disabled = false;
4+
private eventRegister: {
5+
[eventName: string]: EventCallback;
6+
} = {};
7+
on(event: string, callback: EventCallback): void {
8+
this.eventRegister[event] = callback;
9+
}
10+
off(event: string) {
11+
delete this.eventRegister[event];
12+
}
13+
enable(): void {
14+
this.disabled = false;
15+
}
16+
disable(): void {
17+
this.disabled = true;
18+
}
19+
destroy() {
20+
this.eventRegister = undefined;
21+
}
22+
triggerEvent(eventName: string, event: Event): boolean|void {
23+
if (this.disabled) { return; }
24+
if (!this.eventRegister) {return; } // used when destory before triggerEvent fire
25+
if (this.eventRegister[eventName]) {
26+
return this.eventRegister[eventName](event);
27+
}
28+
}
29+
}
30+
31+
export interface HTMLElementExtendOpt<T> {
32+
el: HTMLElement;
33+
option: T;
34+
updateOption(T): void;
35+
}

0 commit comments

Comments
 (0)