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

[FlowIT-JIT]

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.