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

Drag and drop within positioned parent. #11

Closed
kennyab opened this issue Sep 19, 2017 · 1 comment
Closed

Drag and drop within positioned parent. #11

kennyab opened this issue Sep 19, 2017 · 1 comment

Comments

@kennyab
Copy link

kennyab commented Sep 19, 2017

LMDD works fine if document or body are the closest positioned elements to the element being dragged, but it doesn't render correctly if the offsetParent is an element positioned at something other than 0,0 relative to the document.

The problem seems to be that LMDD uses getBoundingClientRect() to determine the placement of the container of the dragged element, and that's always calculated relative to the viewport. Then that the top and left values of those are used in conjunction with scroll values to set the rectRef of the cloneRef. But when the top and left of cloneRef are set using those values, it treats those values relative to offsetParent, not to document's origin, and thus cloneRef is placed too far down and to the right.

Have I missed an option for dealing with, or is a limitation of the library?

Thanks.

@supraniti
Copy link
Owner

LMDD creates a clone of the container, hides the original one, and shows you the cloned elements while dragging.
Positions are calculated from the original container (which is still a live DOM element with 0 opacity)
so IMO the problem you are describing is not a position calculation problem.
It would really help if you send an example - jsfiddle/codepen so i can debug it.

In general, almost any problem with LMDD can be fixed by applying the right CSS rules and HTML classes.

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

No branches or pull requests

2 participants