Skip to content

Commit c455ef2

Browse files
adumesnyadumesny
committed
H5 draggable by actual div handle
* fix #1581 * set draggabble to actual div handle rather than entire item so content can also respond to dragging. * no longer need to have mousedown to check for clikc on actual drag area...
1 parent 9cb9781 commit c455ef2

File tree

3 files changed

+58
-20
lines changed

3 files changed

+58
-20
lines changed

‎doc/CHANGES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ Change log
5151
- fix [1571](https://github.com/gridstack/gridstack.js/issues/1571) don't allow drop when grid is full
5252
- fix [1570](https://github.com/gridstack/gridstack.js/issues/1570) easier to drag out/in from below
5353
- fix [1579](https://github.com/gridstack/gridstack.js/issues/1579) `cellHeight()` not updating CSS correctly
54+
- fix [1581](https://github.com/gridstack/gridstack.js/issues/1581) H5 draggable by actual div handle rather than entire item (let content respond to drag as well)
5455

5556
## 3.1.4 (2021-1-11)
5657

‎spec/e2e/html/1581_drag_by_header_h5.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>drag by header</title>
5+
<link rel="stylesheet" href="../../../demo/demo.css"/>
6+
<script src="../../../dist/gridstack-h5.js"></script>
7+
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
8+
</head>
9+
<body>
10+
<div class="container-fluid">
11+
<h1>dragging by header not conflicting with content drag (Sortable.js)</h1>
12+
<h3>sortable.js only</h3>
13+
<div>
14+
<div id="widgetcontent2" class="list-group">
15+
<div class="list-group-item"> MOVE ME !!!! 11111 11111</div>
16+
<div class="list-group-item"> MOVE ME !!!! 22222 22222</div>
17+
<div class="list-group-item"> MOVE ME !!!! 33333 33333</div>
18+
</div>
19+
</div>
20+
<br>
21+
<div class="grid-stack"></div>
22+
23+
</div>
24+
<script type="text/javascript">
25+
//Example Widget HTML Data
26+
var html = '\
27+
<div class="grid-stack-item"> \
28+
<div class="grid-stack-item-content" > \
29+
<div class="widgetheader">drag me here</div> \
30+
<div id="gridstackwidgetcontent" class="list-group"> \
31+
<div class="list-group-item"> MOVE ME !!!! 11111 11111</div> \
32+
<div class="list-group-item"> MOVE ME !!!! 22222 22222</div> \
33+
<div class="list-group-item"> MOVE ME !!!! 33333 33333</div> \
34+
</div> \
35+
</div> \
36+
</div>';
37+
38+
var options = {
39+
float: true,
40+
draggable: { handle: '.widgetheader' }
41+
};
42+
let grid = GridStack.init(options);
43+
grid.addWidget(html, {w:2, h:1, x:0, y:0});
44+
Sortable.create(gridstackwidgetcontent);
45+
Sortable.create(widgetcontent2);
46+
</script>
47+
</body>
48+
</html>

‎src/h5/dd-draggable.ts‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,10 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
6666
super();
6767
this.el = el;
6868
this.option = option;
69+
// get the element that is actually supposed to be dragged by
70+
let className = option.handle.substring(1);
71+
this.dragEl = el.classList.contains(className) ? el : el.querySelector(option.handle) || el;
6972
// create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
70-
this._mouseDown = this._mouseDown.bind(this);
7173
this._dragStart = this._dragStart.bind(this);
7274
this._drag = this._drag.bind(this);
7375
this._dragEnd = this._dragEnd.bind(this);
@@ -85,20 +87,18 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
8587

8688
public enable(): void {
8789
super.enable();
88-
this.el.draggable = true;
90+
this.dragEl.draggable = true;
91+
this.dragEl.addEventListener('dragstart', this._dragStart);
8992
this.el.classList.remove('ui-draggable-disabled');
9093
this.el.classList.add('ui-draggable');
91-
this.el.addEventListener('mousedown', this._mouseDown);
92-
this.el.addEventListener('dragstart', this._dragStart);
9394
}
9495

9596
public disable(forDestroy = false): void {
9697
super.disable();
97-
this.el.removeAttribute('draggable');
98+
this.dragEl.removeAttribute('draggable');
99+
this.dragEl.removeEventListener('dragstart', this._dragStart);
98100
this.el.classList.remove('ui-draggable');
99101
if (!forDestroy) this.el.classList.add('ui-draggable-disabled');
100-
this.el.removeEventListener('mousedown', this._mouseDown);
101-
this.el.removeEventListener('dragstart', this._dragStart);
102102
}
103103

104104
public destroy(): void {
@@ -120,18 +120,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
120120
return this;
121121
}
122122

123-
/** @internal call when mouse goes down before a dragstart happens */
124-
private _mouseDown(event: MouseEvent): void {
125-
// make sure we are clicking on a drag handle or child of it...
126-
let className = this.option.handle.substring(1);
127-
let el = event.target as HTMLElement;
128-
while (el && !el.classList.contains(className)) { el = el.parentElement; }
129-
this.dragEl = el;
130-
}
131-
132123
/** @internal */
133124
private _dragStart(event: DragEvent): void {
134-
if (!this.dragEl) { event.preventDefault(); return; }
135125
DDManager.dragElement = this;
136126
this.helper = this._createHelper(event);
137127
this._setupHelperContainmentStyle();
@@ -152,7 +142,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
152142
private _setupDragFollowNodeNotifyStart(ev: Event): DDDraggable {
153143
this._setupHelperStyle();
154144
document.addEventListener('dragover', this._drag, DDDraggable.dragEventListenerOption);
155-
this.el.addEventListener('dragend', this._dragEnd);
145+
this.dragEl.addEventListener('dragend', this._dragEnd);
156146
if (this.option.start) {
157147
this.option.start(ev, this.ui());
158148
}
@@ -186,7 +176,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
186176
cancelAnimationFrame(this.paintTimer);
187177
}
188178
document.removeEventListener('dragover', this._drag, DDDraggable.dragEventListenerOption);
189-
this.el.removeEventListener('dragend', this._dragEnd);
179+
this.dragEl.removeEventListener('dragend', this._dragEnd);
190180
}
191181
this.dragging = false;
192182
this.helper.classList.remove('ui-draggable-dragging');
@@ -203,7 +193,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
203193
this.triggerEvent('dragstop', ev);
204194
delete DDManager.dragElement;
205195
delete this.helper;
206-
delete this.dragEl;
207196
}
208197

209198
/** @internal create a clone copy (or user defined method) of the original drag item if set */

0 commit comments

Comments
 (0)