Skip to content

Commit 5042030

Browse files
adumesnyadumesny
authored
Merge pull request #1633 from adumesny/develop
collide: dragging from outside fix
2 parents b7d984b + f4a8e6b commit 5042030

File tree

5 files changed

+63
-8
lines changed

5 files changed

+63
-8
lines changed

‎demo/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<body>
88
<h1>Demos</h1>
99
<ul>
10-
<li><a href="advance.html">Advance</a></li>
1110
<li><a href="anijs.html">AniJS</a></li>
1211
<li><a href="cell-height.html">Cell Height</a></li>
1312
<li><a href="column.html">Column</a></li>
@@ -24,6 +23,8 @@ <h1>Demos</h1>
2423
<li><a href="mobile.html">Mobile touch (JQ)</a></li>
2524
<li><a href="vue3js.html">Vue3.js</a></li>
2625
<li><a href="vue2js.html">Vue2.js</a></li>
26+
<li><a href="web1.html">Website demo 1</a></li>
27+
<li><a href="web2.html">Website demo 2</a></li>
2728
<li><a href="web-comp.html">Web Component</a></li>
2829
</ul>
2930
</body>

‎demo/web1.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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>demo1</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-h5.js"></script>
17+
</head>
18+
19+
<body>
20+
<h1>Web demo 1</h1>
21+
<div class="grid-stack"></div>
22+
23+
<script type="text/javascript">
24+
let grid = GridStack.init({
25+
cellHeight: 70,
26+
});
27+
28+
let items = [
29+
{x: 0, y: 0, w: 4, h: 2, content: '1'},
30+
{x: 4, y: 0, w: 4, h: 4, content: '2'},
31+
{x: 8, y: 0, w: 2, h: 2, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">'},
32+
{x: 10, y: 0, w: 2, h: 2, content: '4'},
33+
{x: 0, y: 2, w: 2, h: 2, content: '5'},
34+
{x: 2, y: 2, w: 2, h: 4, content: '6'},
35+
{x: 8, y: 2, w: 4, h: 2, content: '7'},
36+
{x: 0, y: 4, w: 2, h: 2, content: '8'},
37+
{x: 4, y: 4, w: 4, h: 2, content: '9'},
38+
{x: 8, y: 4, w: 2, h: 2, content: '10'},
39+
{x: 10, y: 4, w: 2, h: 2, content: '11'},
40+
];
41+
grid.load(items);
42+
43+
grid.on('added removed change', function(e, items) {
44+
let str = '';
45+
items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
46+
console.log(e.type + ' ' + items.length + ' items:' + str );
47+
});
48+
</script>
49+
</body>
50+
51+
</html>

demo/advance.html renamed to demo/web2.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ <h1>Advanced Demo</h1>
5757
<script type="text/javascript">
5858

5959
let grid = GridStack.init({
60+
cellHeight: 70,
6061
acceptWidgets: true,
6162
dragIn: '.newWidget', // class that can be dragged from outside
6263
dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },

‎src/gridstack-dd.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,7 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
165165
let h = node.h || Math.round(el.offsetHeight / this.getCellHeight(true)) || 1;
166166

167167
// copy the node original values (min/max/id/etc...) but override width/height/other flags which are this grid specific
168-
let newNode = this.engine.prepareNode({...node, ...{w, h, _added: false, _temporary: true}});
169-
newNode._isOutOfGrid = true;
168+
let newNode = this.engine.prepareNode({...node, ...{w, h, _added: false, _temporary: true, _isOutOfGrid: true}});
170169
el.gridstackNode = newNode;
171170
el._gridstackNodeOrig = node;
172171

‎src/gridstack-engine.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,11 @@ export class GridStackEngine {
8484

8585
let didMove = false;
8686
let newOpt: GridStackMoveOpts = {nested: true, pack: false, sanitize: false};
87-
while (collide = collide || this.collide(node, nn)) { // we could start colliding more than 1 item... so repeat for each
87+
while (collide = collide || this.collide(node, nn)) { // could collide with more than 1 item... so repeat for each
8888
let moved: boolean;
89-
// if colliding with locked item, OR moving down to a different sized item (not handle with swap) that could take our place, move ourself past instead
89+
// if colliding with locked item, OR moving down to a different sized item
90+
// (not handled with swap) that could take our place, move ourself past it instead
91+
// but remember that skip down so we only do this one (and push others otherwise).
9092
if (collide.locked || (node._moving && !node._skipDown && nn.y > node.y &&
9193
!this.float && !this.collide(collide, {...collide, y: node.y}, node)) &&
9294
Utils.isIntercepted(collide, {x: node.x-0.5, y: node.y-0.5, w: node.w+1, h: node.h+1})) {
@@ -96,7 +98,7 @@ export class GridStackEngine {
9698
if (collide.locked && moved) {
9799
Utils.copyPos(nn, node); // moving after lock become our new desired location
98100
} else if (moved && opt.pack && !collide.locked) {
99-
// we moved after and are will pack, do it now and keep the original drop location to see what else we might push way
101+
// we moved after and will pack: do it now and keep the original drop location to see what else we might push way
100102
this._packNodes();
101103
}
102104
didMove = didMove || moved;
@@ -534,10 +536,11 @@ export class GridStackEngine {
534536

535537
/** true if x,y or w,h are different after clamping to min/max */
536538
public changedPosConstrain(node: GridStackNode, p: GridStackPosition): boolean {
537-
if (node.x !== p.x || node.y !== p.y) return true;
538-
// check constrained w,h
539+
// make sure w,h are set
539540
p.w = p.w || node.w;
540541
p.h = p.h || node.h;
542+
if (node.x !== p.x || node.y !== p.y) return true;
543+
// check constrained w,h
541544
if (node.maxW) { p.w = Math.min(p.w, node.maxW); }
542545
if (node.maxH) { p.h = Math.min(p.h, node.maxH); }
543546
if (node.minW) { p.w = Math.max(p.w, node.minW); }

0 commit comments

Comments
 (0)