Drag element into the iframe sortable elements the clone helper offset position issue.

[gaojianzhuang]

I used the 1.13.1, I have another issue, when drag the element into the iframe and the sortable elements, the cloned element offset changed, but end sortable, the offset works again.

Anybody can help figure out the root cause? Thanks. BTW, when start the drag operation, the drag not smoothly and feel some lags.

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

[gaojianzhuang]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

It exists from 1.12.1 to the latest. Thanks.

[mgol]

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex.

[gaojianzhuang]

As my understanding, this issue maybe caused by the clone element position caculate. When start drag the clone element belongs to the parent html. When into the iframe element and sortable, the sortable will create a new clone element, the position will be recaculate, but currently, the position is the iframe html, some offsets will be change. That's my guess, I will do some research. @mgol Thanks.

[gaojianzhuang]

1 - This sortable.positionAbs should be check the sortable is in the iframe. sortable.document != draggage.document. The positionAbs value should be caculated with the iframe page offset.

https://github.com/jquery/jquery-ui/blob/main/ui/widgets/draggable.js#L845 2 - When the outer draggable element not over the iframe area, we should not active the sortable element which in the iframe. https://github.com/jquery/jquery-ui/blob/50d35e60f1c93859edab183890a5a2f1a80879f1/ui/widgets/sortable.js#L647 3 - If the dragging element is outer element, we should not create the helper in the iframe, we should keep it in the outer html document. https://github.com/jquery/jquery-ui/blob/50d35e60f1c93859edab183890a5a2f1a80879f1/ui/widgets/sortable.js#L1135 4 - We should not append the dragging item into the sortable items, only when the dragging stop, we will create a element and append to the sortable container. https://github.com/jquery/jquery-ui/blob/main/ui/widgets/draggable.js#L879

Sorry guys, I am not good at the javascript, those are my analytics. Thanks. @mgol

I have fixed it in my demo repository. https://github.com/gaojianzhuang/jquery-ui-bugs But not do the full test.

[gaojianzhuang]

I have found a solution to fix this issue. We just focus on the configuration only. 1 - Set the outer daggable element config as below:

{
    appendTo: "body",
    ...
}

2 - Set the inner sorttable element config as below:

{
    appendTo: "body",
    ...
}

If that, the clone helper will base on the parent html body move, it will avoid the dragging helper element moving issue. But still have another issue, because the sortable element append to the parent html document, the position of it will not correct and the parent html should contains the CSS style which belongs to the iframe html document.

Root cause is the helper element document changed, we should add the document compare logic. The helper position caculate should focus on the current document.

For my solution, I found a wired case just like below:

If the dragging is very fast, the helper will be changed from the parent body to the sortable element. We know the gray color belongs to the parent html and the purple color belongs to the sortable element.