Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c686470

Browse files
adumesnyadumesny
authored
Merge pull request gridstack#1458 from adumesny/h5
H5: rebased from 2.2.0 latest code
2 parents 4b8d64d + ed058d9 commit c686470

16 files changed

+1414
-8
lines changed

‎demo/two-h5.html

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Two grids demo</title>
8+
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10+
<link rel="stylesheet" href="demo.css"/>
11+
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
12+
13+
<script src="../dist/gridstack.h5.js"></script>
14+
15+
<style type="text/css">
16+
.grid-stack-item-removing {
17+
opacity: 0.5;
18+
}
19+
.trash {
20+
height: 150px;
21+
margin-bottom: 20px;
22+
background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
23+
}
24+
.sidebar {
25+
background: rgba(0, 255, 0, 0.1);
26+
height: 150px;
27+
padding: 25px 0;
28+
text-align: center;
29+
}
30+
.sidebar .grid-stack-item {
31+
width: 120px;
32+
height: 50px;
33+
border: 2px dashed green;
34+
text-align: center;
35+
line-height: 35px;
36+
z-index: 10;
37+
background: rgba(0, 255, 0, 0.1);
38+
cursor: default;
39+
display: inline-block;
40+
}
41+
.sidebar .grid-stack-item .grid-stack-item-content {
42+
background: none;
43+
}
44+
</style>
45+
</head>
46+
<body>
47+
<div class="container-fluid">
48+
<h1>Two grids demo</h1>
49+
50+
<div class="row">
51+
<div class="col-md-3">
52+
<div class="sidebar">
53+
54+
<!-- will size to match content -->
55+
<div class="grid-stack-item">
56+
<div class="grid-stack-item-content">Drag me</div>
57+
</div>
58+
<!-- manually force a drop size of 2x1 -->
59+
<div class="grid-stack-item" data-gs-width="2" data-gs-height="1">
60+
<div class="grid-stack-item-content">Drag me 2x1</div>
61+
</div>
62+
63+
</div>
64+
</div>
65+
<div class="col-md-9">
66+
<div class="trash">
67+
</div>
68+
</div>
69+
</div>
70+
71+
<div class="row">
72+
<div class="col-md-6">
73+
<a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: false</a>
74+
<a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
75+
<div class="grid-stack grid-stack-6"></div>
76+
</div>
77+
<div class="col-md-6">
78+
<a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: true</a>
79+
<a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
80+
<div class="grid-stack grid-stack-6"></div>
81+
</div>
82+
</div>
83+
</div>
84+
<script src="events.js"></script>
85+
<script type="text/javascript">
86+
let options = {
87+
column: 6,
88+
minRow: 1, // don't collapse when empty
89+
cellHeight: 70,
90+
disableOneColumnMode: true,
91+
float: false,
92+
dragIn: '.sidebar .grid-stack-item', // class that can be dragged from outside
93+
dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
94+
removable: '.trash', // drag-out delete class
95+
removeTimeout: 100,
96+
acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value
97+
};
98+
let grids = GridStack.initAll(options);
99+
grids[1].float(true);
100+
101+
let items = [
102+
{x: 0, y: 0, width: 2, height: 2},
103+
{x: 3, y: 1, width: 1, height: 2},
104+
{x: 4, y: 1, width: 1},
105+
{x: 2, y: 3, width: 3, maxWidth: 3, id: 'special', content: 'has maxWidth=3'},
106+
{x: 2, y: 5, width: 1}
107+
];
108+
109+
grids.forEach(function (grid, i) {
110+
addEvents(grid, i);
111+
grid.load(items);
112+
});
113+
114+
function toggleFloat(button, i) {
115+
grids[i].float(! grids[i].getFloat());
116+
button.innerHTML = 'float: ' + grids[i].getFloat();
117+
}
118+
119+
function compact(i) {
120+
grids[i].compact();
121+
}
122+
</script>
123+
</body>
124+
</html>

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// dd-base-impl.ts 2.2.0-dev @preserve
2+
3+
/**
4+
* https://gridstackjs.com/
5+
* (c) 2020 rhlin, Alain Dumesny
6+
* gridstack.js may be freely distributed under the MIT license.
7+
*/
8+
export type EventCallback = (event: Event) => boolean|void;
9+
export abstract class DDBaseImplement {
10+
disabled = false;
11+
private eventRegister: {
12+
[eventName: string]: EventCallback;
13+
} = {};
14+
on(event: string, callback: EventCallback): void {
15+
this.eventRegister[event] = callback;
16+
}
17+
off(event: string) {
18+
delete this.eventRegister[event];
19+
}
20+
enable(): void {
21+
this.disabled = false;
22+
}
23+
disable(): void {
24+
this.disabled = true;
25+
}
26+
destroy() {
27+
this.eventRegister = undefined;
28+
}
29+
triggerEvent(eventName: string, event: Event): boolean|void {
30+
if (this.disabled) { return; }
31+
if (!this.eventRegister) {return; } // used when destroy before triggerEvent fire
32+
if (this.eventRegister[eventName]) {
33+
return this.eventRegister[eventName](event);
34+
}
35+
}
36+
}
37+
38+
export interface HTMLElementExtendOpt<T> {
39+
el: HTMLElement;
40+
option: T;
41+
updateOption(T): void;
42+
}

0 commit comments

Comments
 (0)