Skip to content

Commit b953118

Browse files
swiety85swiety85
authored
Merge pull request swiety85#88 from swiety85/gridster-in-scrollable-element-#21
Make dragging works when gridster is in scrollable element
2 parents b01a362 + 96340b9 commit b953118

File tree

6 files changed

+58
-22
lines changed

6 files changed

+58
-22
lines changed

‎demo/src/app/gridster/gridster-item/gridster-item.component.ts

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -339,8 +339,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
339339

340340
const dragSub = draggable.dragMove
341341
.subscribe((event: DraggableEvent) => {
342-
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
343-
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
342+
const scrollData = this.gridster.gridsterScrollData;
344343

345344
this.resizeElement({
346345
direction,
@@ -351,8 +350,8 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
351350
},
352351
startEvent,
353352
moveEvent: event,
354-
scrollDiffX: scrollLeft - startData.scrollLeft,
355-
scrollDiffY: scrollTop - startData.scrollTop
353+
scrollDiffX: scrollData.scrollLeft - startData.scrollLeft,
354+
scrollDiffY: scrollData.scrollTop - startData.scrollTop
356355
});
357356

358357
this.gridster.onResizeDrag(this.item);
@@ -390,6 +389,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
390389
}
391390
this.zone.runOutsideAngular(() => {
392391
let cursorToElementPosition;
392+
393393
const draggable = new Draggable(this.$element, {
394394
handlerClass: this.gridster.draggableOptions.handlerClass
395395
});
@@ -406,9 +406,11 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
406406

407407
const dragSub = draggable.dragMove
408408
.subscribe((event: DraggableEvent) => {
409-
this.$element.style.top = (event.clientY - cursorToElementPosition.y -
409+
const scrollData = this.gridster.gridsterScrollData;
410+
411+
this.$element.style.top = (event.clientY - cursorToElementPosition.y - scrollData.scrollTop -
410412
this.gridster.gridsterRect.top) + 'px';
411-
this.$element.style.left = (event.clientX - cursorToElementPosition.x -
413+
this.$element.style.left = (event.clientX - cursorToElementPosition.x - scrollData.scrollLeft -
412414
this.gridster.gridsterRect.left) + 'px';
413415

414416
this.gridster.onDrag(this.item);
@@ -460,8 +462,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
460462
}
461463

462464
private createResizeStartObject(direction: string) {
463-
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
464-
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
465+
const scrollData = this.gridster.gridsterScrollData;
465466

466467
return {
467468
top: parseInt(this.$element.style.top, 10),
@@ -488,8 +489,8 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
488489
direction.indexOf('n') >= 0 ?
489490
this.item.y + this.item.h : this.options.maxHeight
490491
),
491-
scrollLeft,
492-
scrollTop
492+
scrollLeft: scrollData.scrollLeft,
493+
scrollTop: scrollData.scrollTop
493494
};
494495
}
495496

‎demo/src/app/gridster/gridster.component.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export class GridsterComponent implements OnInit, AfterViewInit, OnDestroy {
106106
});
107107

108108
this.zone.runOutsideAngular(() => {
109-
const scrollSub = Observable.fromEvent(document, 'scroll')
109+
const scrollSub = Observable.fromEvent(document, 'scroll', true)
110110
.subscribe(() => this.updateGridsterElementData());
111111
this.subscribtions.push(scrollSub);
112112
});
@@ -180,9 +180,25 @@ export class GridsterComponent implements OnInit, AfterViewInit, OnDestroy {
180180
}
181181

182182
updateGridsterElementData() {
183+
this.gridster.gridsterScrollData = this.getScrollPositionFromParents(this.$element);
183184
this.gridster.gridsterRect = this.$element.getBoundingClientRect();
184185
}
185186

187+
private getScrollPositionFromParents(element: Element, data = {scrollTop: 0, scrollLeft: 0}): {scrollTop: number, scrollLeft: number} {
188+
189+
if (element.parentElement !== document.body) {
190+
data.scrollTop += element.parentElement.scrollTop;
191+
data.scrollLeft += element.parentElement.scrollLeft;
192+
193+
return this.getScrollPositionFromParents(element.parentElement, data);
194+
}
195+
196+
return {
197+
scrollTop: data.scrollTop,
198+
scrollLeft: data.scrollLeft
199+
};
200+
}
201+
186202
/**
187203
* Connect gridster prototype item to gridster dragging hooks (onStart, onDrag, onStop).
188204
*/

‎demo/src/app/gridster/gridster.service.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export class GridsterService {
3333
};
3434

3535
gridsterRect: ClientRect;
36+
gridsterScrollData: {scrollTop: number, scrollLeft: number};
3637

3738
gridsterOptions: GridsterOptions;
3839

‎src/gridster-item/gridster-item.component.ts

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -339,8 +339,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
339339

340340
const dragSub = draggable.dragMove
341341
.subscribe((event: DraggableEvent) => {
342-
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
343-
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
342+
const scrollData = this.gridster.gridsterScrollData;
344343

345344
this.resizeElement({
346345
direction,
@@ -351,8 +350,8 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
351350
},
352351
startEvent,
353352
moveEvent: event,
354-
scrollDiffX: scrollLeft - startData.scrollLeft,
355-
scrollDiffY: scrollTop - startData.scrollTop
353+
scrollDiffX: scrollData.scrollLeft - startData.scrollLeft,
354+
scrollDiffY: scrollData.scrollTop - startData.scrollTop
356355
});
357356

358357
this.gridster.onResizeDrag(this.item);
@@ -390,6 +389,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
390389
}
391390
this.zone.runOutsideAngular(() => {
392391
let cursorToElementPosition;
392+
393393
const draggable = new Draggable(this.$element, {
394394
handlerClass: this.gridster.draggableOptions.handlerClass
395395
});
@@ -406,9 +406,11 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
406406

407407
const dragSub = draggable.dragMove
408408
.subscribe((event: DraggableEvent) => {
409-
this.$element.style.top = (event.clientY - cursorToElementPosition.y -
409+
const scrollData = this.gridster.gridsterScrollData;
410+
411+
this.$element.style.top = (event.clientY - cursorToElementPosition.y - scrollData.scrollTop -
410412
this.gridster.gridsterRect.top) + 'px';
411-
this.$element.style.left = (event.clientX - cursorToElementPosition.x -
413+
this.$element.style.left = (event.clientX - cursorToElementPosition.x - scrollData.scrollLeft -
412414
this.gridster.gridsterRect.left) + 'px';
413415

414416
this.gridster.onDrag(this.item);
@@ -460,8 +462,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
460462
}
461463

462464
private createResizeStartObject(direction: string) {
463-
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
464-
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
465+
const scrollData = this.gridster.gridsterScrollData;
465466

466467
return {
467468
top: parseInt(this.$element.style.top, 10),
@@ -488,8 +489,8 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
488489
direction.indexOf('n') >= 0 ?
489490
this.item.y + this.item.h : this.options.maxHeight
490491
),
491-
scrollLeft,
492-
scrollTop
492+
scrollLeft: scrollData.scrollLeft,
493+
scrollTop: scrollData.scrollTop
493494
};
494495
}
495496

‎src/gridster.component.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export class GridsterComponent implements OnInit, AfterViewInit, OnDestroy {
106106
});
107107

108108
this.zone.runOutsideAngular(() => {
109-
const scrollSub = Observable.fromEvent(document, 'scroll')
109+
const scrollSub = Observable.fromEvent(document, 'scroll', true)
110110
.subscribe(() => this.updateGridsterElementData());
111111
this.subscribtions.push(scrollSub);
112112
});
@@ -180,9 +180,25 @@ export class GridsterComponent implements OnInit, AfterViewInit, OnDestroy {
180180
}
181181

182182
updateGridsterElementData() {
183+
this.gridster.gridsterScrollData = this.getScrollPositionFromParents(this.$element);
183184
this.gridster.gridsterRect = this.$element.getBoundingClientRect();
184185
}
185186

187+
private getScrollPositionFromParents(element: Element, data = {scrollTop: 0, scrollLeft: 0}): {scrollTop: number, scrollLeft: number} {
188+
189+
if (element.parentElement !== document.body) {
190+
data.scrollTop += element.parentElement.scrollTop;
191+
data.scrollLeft += element.parentElement.scrollLeft;
192+
193+
return this.getScrollPositionFromParents(element.parentElement, data);
194+
}
195+
196+
return {
197+
scrollTop: data.scrollTop,
198+
scrollLeft: data.scrollLeft
199+
};
200+
}
201+
186202
/**
187203
* Connect gridster prototype item to gridster dragging hooks (onStart, onDrag, onStop).
188204
*/

‎src/gridster.service.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export class GridsterService {
3333
};
3434

3535
gridsterRect: ClientRect;
36+
gridsterScrollData: {scrollTop: number, scrollLeft: number};
3637

3738
gridsterOptions: GridsterOptions;
3839

0 commit comments

Comments
 (0)