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

DragDrop: Draggable "jumps" if it is positioned and also contained in a positioned parent with borders #152

Open
FlowIT-JIT opened this issue Mar 11, 2022 · 0 comments

Comments

@FlowIT-JIT
Copy link
Collaborator

The following example results in draggable object "jumping" 5px to the right and down when being dragged, due to the borders applied to the positioned parent. This only happens when the parent and draggable are both positioned. The draggable does not necessarily have to be a direct child of the positioned parent for the problem to be triggered.

document.body.innerHTML = "";

var parent = document.createElement("div");
parent.style.cssText = "border: 5px solid blue; width: 800px; height: 600px; position: absolute; top: 0; left: 0;";
document.body.appendChild(parent);

var movable = document.createElement("div");
movable.style.cssText = "border: 2px solid red; width: 5em; height: 5em; position: absolute; top: 5em; left: 5em;";
new Fit.DragDrop.Draggable(movable);
parent.appendChild(movable);

Removing positioning from either the parent or the draggable element resolves the problem. But to support the scenario above, Fit.DragDrop.Draggable should substract borders.

Furthermore, while debugging, I accidentially produced a scenario where the positioned parent did not have top/left/right/bottom set, only position:absolute or position:fixed. This caused positioning of the draggable element to be affected not only by the borders on the parent element, but also the margin applied to , as the following example demonstrates.

document.body.style.margin = "8px"; // Ensure margin (default value in Chrome)
document.body.innerHTML = "";

var parent = document.createElement("div");
parent.style.cssText = "border: 5px solid blue; width: 800px; height: 600px; position: absolute;";
document.body.appendChild(parent);

var movable = document.createElement("div");
movable.style.cssText = "border: 2px solid red; width: 5em; height: 5em; position: absolute; top: 5em; left: 5em;";
new Fit.DragDrop.Draggable(movable);
parent.appendChild(movable);

The code above causes the draggable element to jump 13px (margin 8px + borders 5px) to the right and down when dragging it.
This problem is hardly worth fixing sicen the usecase is unlikely, so I mainly mention it for the purpose of documenting it.

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

No branches or pull requests

1 participant