Skip to content

Commit

Permalink
dragging clipp fix part II
Browse files Browse the repository at this point in the history
* gridstack#1902 change caused a flicker when item goes posision:fixed, so make sure we position on screen during init as well.
  • Loading branch information
adumesny committed Dec 23, 2021
1 parent d6df3d2 commit be9ee98
Showing 1 changed file with 12 additions and 8 deletions.
20 changes: 12 additions & 8 deletions src/h5/dd-draggable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -211,16 +211,20 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
/** @internal */
private _setupHelperStyle(): DDDraggable {
// TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593
this.helper.style.pointerEvents = 'none';
this.helper.style.width = this.dragOffset.width + 'px';
this.helper.style.height = this.dragOffset.height + 'px';
this.helper.style.willChange = 'left, top';
this.helper.style.transition = 'none'; // show up instantly
this.helper.style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
this.helper.style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %)
const rec = this.helper.getBoundingClientRect();
const style = this.helper.style;
style.pointerEvents = 'none';
style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %)
style.width = this.dragOffset.width + 'px';
style.height = this.dragOffset.height + 'px';
style.willChange = 'left, top';
style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
style.left = rec.left + 'px';
style.top = rec.top + 'px';
style.transition = 'none'; // show up instantly
setTimeout(() => {
if (this.helper) {
this.helper.style.transition = null; // recover animation
style.transition = null; // recover animation
}
}, 0);
return this;
Expand Down

0 comments on commit be9ee98

Please sign in to comment.