You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When I change the target div's SCALE, just like "transform: scale(0.457292) translate(0px, 0px);",the movement or dragging in the gridstack is out of sync with the real mouse movement
Because In many cases we need to zoom the page，
in the example https://gridstackjs.com/demo/advance.html,
I change the style in grid-stack div
just like <div class="grid-stack grid-stack-instance-9799 grid-stack-animate ui-droppable" data-gs-animate="yes" data-gs-current-row="6" style="height: 460px;transform: scale(0.7, 0.7) translate(0px, 0px);">
and when we drag or resize by mouse,
the movement or dragging in the gridstack is out of sync with the real mouse movement
The same is true even if you put the zoom style on the outer DIV
just like <div style="width:100%;height:100%;transform: scale(0.7, 0.7) translate(0px, 0px);> <div class="grid-stack grid-stack-instance-9799 grid-stack-animate ui-droppable" data-gs-animate="yes" data-gs-current-row="6" >...</div> </div>
unlikely to get fixed as not a priority or support and I don't understand the use case why you would scale a div (so many things break when scaling in my experience).
HTML5 drag&drop is a lot worse than the JQ version which seems only off by scale factor relative to parent (0,0)
Activity
adumesny commentedon May 14, 2020
you need to create a reproduceable test case if you want us to take a look. look at the jsfiddle template
hzjux001 commentedon May 14, 2020
Because In many cases we need to zoom the page，
in the example https://gridstackjs.com/demo/advance.html,
I change the style in grid-stack div
just like
<div class="grid-stack grid-stack-instance-9799 grid-stack-animate ui-droppable" data-gs-animate="yes" data-gs-current-row="6" style="height: 460px;transform: scale(0.7, 0.7) translate(0px, 0px);">and when we drag or resize by mouse,
the movement or dragging in the gridstack is out of sync with the real mouse movement
hzjux001 commentedon May 14, 2020
The same is true even if you put the zoom style on the outer DIV
just like
<div style="width:100%;height:100%;transform: scale(0.7, 0.7) translate(0px, 0px);><div class="grid-stack grid-stack-instance-9799 grid-stack-animate ui-droppable" data-gs-animate="yes" data-gs-current-row="6" >...</div></div>[-]when change the target div's scale,[/-][+]mouse drag out of sync with div scale[/+]hzjux001 commentedon May 22, 2020
Who can help me solve this problem,Please.
adumesny commentedon May 22, 2020
browser zooming works just fine, so not sure why you would manually scale the div in code...
if you are such in need of a fix, and don't want to fix it yourself, maybe you should consider donating $ to this effort.
hzjux001 commentedon May 26, 2020
How can I donate
adumesny commentedon May 26, 2020
github page and website has donate links https://github.com/gridstack/gridstack.js
vishaldodiya commentedon Nov 13, 2020
@adumesny Is there any workaround for this? Like we can calculate position according to scale and pass it to gridstack.
adumesny commentedon Dec 5, 2020
unlikely to get fixed as not a priority or support and I don't understand the use case why you would scale a div (so many things break when scaling in my experience).
HTML5 drag&drop is a lot worse than the JQ version which seems only off by scale factor relative to parent (0,0)
scale demo cleanup
adumesny commentedon Sep 30, 2023
fixed in next release.
Revert "fix(drag): always put element under the mouse when dragging a…
Revert "fix(drag): always put element under the mouse when dragging a…
fix(scale): update drag and resize when the gridstack parent is scale…
adumesny commentedon Oct 22, 2023
will be in next 9.5 relase.