Skip to content

Commit 6b1a5c3

Browse files
adumesnyadumesny
authored
Merge pull request #2963 from adumesny/master
shadow DOM drag re-append fix
2 parents 663b439 + 51c383d commit 6b1a5c3

File tree

3 files changed

+73
-1
lines changed

3 files changed

+73
-1
lines changed

‎doc/CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ Change log
125125
* fix: [#2921](https://github.com/gridstack/gridstack.js/pull/2921) replace initMouseEvent with MouseEvent constructor and added composed: true
126126
* fix: [#2939](https://github.com/gridstack/gridstack.js/issues/2939) custom drag handle not working with LazyLoad
127127
* fix: [#2955](https://github.com/gridstack/gridstack.js/issues/2955) angular circular dependency
128+
* fix: [#2951](https://github.com/gridstack/gridstack.js/issues/2951) shadow DOM dragging re-appending fix
128129

129130
## 11.3.0 (2025-01-26)
130131
* feat: added `isIgnoreChangeCB()` if changeCB should be ignored due to column change, sizeToContent, loading, etc...

‎spec/e2e/html/2951_shadow_dom.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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>Shadow DOM dragging</title>
8+
<script src="../../../dist/gridstack-all.js"></script>
9+
</head>
10+
<body>
11+
<h2>Inside Custom Element with Shadow DOM</h2>
12+
<demo-gridstack></demo-gridstack>
13+
<script type="text/javascript">
14+
class HTMLDemoGridStack extends HTMLElement {
15+
constructor() {
16+
super();
17+
this.attachShadow({
18+
mode: "open",
19+
});
20+
}
21+
22+
connectedCallback() {
23+
const styleBlocks = `
24+
<link href="https://unpkg.com/[email protected]/dist/gridstack.min.css" rel="stylesheet" />
25+
<style type="text/css">
26+
*, *::before, *::after {
27+
box-sizing: border-box;
28+
}
29+
:host { display: block; }
30+
31+
.grid-stack {
32+
background-color: #fafad2;
33+
}
34+
.grid-stack-item-content {
35+
background-color: #18bc9c;
36+
}
37+
</style>
38+
`;
39+
40+
this.shadowRoot.innerHTML = `${styleBlocks}<div class="grid-stack"></div>`;
41+
const gridEl = this.shadowRoot.querySelector("div");
42+
const items = [
43+
{
44+
content: "my first widget",
45+
}, // will default to location (0,0) and 1x1
46+
{
47+
w: 2,
48+
content: "another longer widget!",
49+
}, // will be placed next at (1,0) and 2x1
50+
{
51+
content: "3rd Widget",
52+
},
53+
];
54+
const grid = GridStack.init(
55+
{
56+
disableOneColumnMode: true,
57+
draggable: {
58+
appendTo: "parent",
59+
},
60+
cellHeight: 100,
61+
},
62+
gridEl
63+
);
64+
grid.load(items);
65+
}
66+
}
67+
68+
customElements.define("demo-gridstack", HTMLDemoGridStack);
69+
</script>
70+
</body>
71+
</html>

‎src/dd-draggable.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
299299
} else if (this.option.helper === 'clone') {
300300
helper = Utils.cloneNode(this.el);
301301
}
302-
if (!document.body.contains(helper)) {
302+
if (!helper.parentElement) {
303303
Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo);
304304
}
305305
this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);

0 commit comments

Comments
 (0)