Drag and drop within positioned parent.

[kennyab]

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]

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.