-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Gridstack with native HTML5 drag&drop in a translateX parent #1820
Comments
I'm mostly sure the issue comes from https://github.com/gridstack/gridstack.js/blob/master/src/h5/dd-draggable.ts#L301. Method I currently dealt with it by hacking CSS in my application.
|
| Layouts using CSS transform: translateX() are pretty used everywhere AFAIK and yet this is the first mention of this bug, so no I don't think it's common or it would have come before and have multiple votes. as you mentioned #1275 is likely similar issue (but with scale) and not planning on looking at those unless someone wants to donate or submit a fix. thank you |
The point isn't about how common it is or not. That scenario was handled fine by using jQueryUI and an older Gristack version. For this reason, it should be addressed in my opinion. |
H5 is a total re-write, and of course it will have different bugs... I don't have the bandwidth to fix everything, so how common is important criteria... you can always use an older jq version or donate to get it fixed... |
I understand. I could submit a PR that would fix my case, but it would remove completely that code.
I don't know why it's there. Is there any issue you know I can relate to? I won't do money donation but I have a neat Angular 12 wrapper for this library that I could share that could replace https://github.com/gridstack/gridstack.js/blob/master/demo/angular.ts. |
I actually didn't write _getDragOffset() code - rhlin did, so I'm not clear how/why it being used but it appears to be there to fix eactly the offset (and eventually scale) issue... but apparently doesn't. Might be good to look at old jqui code and see how they handled offsets/scales, though they don't use 'fixed' positionning if I recall (was issue clipping between nested grids, which I do differently now) style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative' |
* this shows that fix gridstack#1820 with latest 7.x code adding a demo with parent offseted working as expected.
working as expected in latest rev (suspect 6+ but checked 7.1.1) - added demo example. closing. |
Subject of the issue
Did anyone ever managed to get Gridstack working in a parent container styled with
transform: translateX(280px);
?Our application side menu / main content is working using transform CSS property to ensure optimal animation performance. When I drag an item, it starts dragging incorrectly 280px left. I have found a similar issue #1275 but this one is about
transform: scale()
. Layouts using CSS transform: translateX() are pretty used everywhere AFAIK.Also, I failed trying to reproduce https://plnkr.co/edit/YhKLL6xqidoBGMdl using this plunker. Might it be because it's using an older version of Gridstack with jQuery UI?
Your environment
Gridstack 4.2.6
Chrome
Native HTML 5 Drag and drop
Steps to reproduce
https://jsfiddle.net/tj6pn2ux/
Expected behavior
Dragging an item should start from where the item actually is
Actual behavior
Begin to drag an item break its location.
The text was updated successfully, but these errors were encountered: