Skip to content
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

Closed
lacroixdavid1 opened this issue Jul 28, 2021 · 7 comments · Fixed by #2120
Closed

Gridstack with native HTML5 drag&drop in a translateX parent #1820

lacroixdavid1 opened this issue Jul 28, 2021 · 7 comments · Fixed by #2120
Labels

Comments

@lacroixdavid1
Copy link
Contributor

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.

@lacroixdavid1 lacroixdavid1 changed the title Gridster with native HTML5 drag&drop in a translateX parent Gridstack with native HTML5 drag&drop in a translateX parent Jul 28, 2021
@lacroixdavid1
Copy link
Contributor Author

I'm mostly sure the issue comes from https://github.com/gridstack/gridstack.js/blob/master/src/h5/dd-draggable.ts#L301.

Method _getDragOffset seems to try to handle that scenario, reading to code it looks to only work when then transform is applied directly to Gridstack. If the style applies to a parent, it doesn't work as expected. Am I missing something?

I currently dealt with it by hacking CSS in my application.

    ef-gridstack-item + div:not(.grid-stack-item):not(.grid-stack-placeholder) {
      // https://github.com/gridstack/gridstack.js/issues/1820
      transform: translateX($distance * -1);
    }

@adumesny
Copy link
Member

| 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

@lacroixdavid1
Copy link
Contributor Author

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.

@adumesny
Copy link
Member

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...

@lacroixdavid1
Copy link
Contributor Author

lacroixdavid1 commented Jul 29, 2021

I understand. I could submit a PR that would fix my case, but it would remove completely that code.


 let xformOffsetX = 0;
    let xformOffsetY = 0;
    if (parent) {
      const testEl = document.createElement('div');
      DDUtils.addElStyles(testEl, {
        opacity: '0',
        position: 'fixed',
        top: 0 + 'px',
        left: 0 + 'px',
        width: '1px',
        height: '1px',
        zIndex: '-999999',
      });
      parent.appendChild(testEl);
      const testElPosition = testEl.getBoundingClientRect();
      parent.removeChild(testEl);
      xformOffsetX = testElPosition.left;
      xformOffsetY = testElPosition.top;
      // TODO: scale ?
    }

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.

@adumesny
Copy link
Member

adumesny commented Dec 27, 2022

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'

adumesny added a commit to adumesny/gridstack.js that referenced this issue Dec 27, 2022
* this shows that fix gridstack#1820 with latest 7.x code
adding a demo with parent offseted working as expected.
@adumesny adumesny mentioned this issue Dec 27, 2022
3 tasks
@adumesny
Copy link
Member

adumesny commented Dec 27, 2022

working as expected in latest rev (suspect 6+ but checked 7.1.1) - added demo example. closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants