javascript - 从div中的可拖动子元素获取边距？

Question

是否可以获取可拖动元素的 margin-left、right、top 和 bottom ？例如我找到了 this JS Fiddle这告诉你我的意思。这里的问题是它只为您提供子元素的像素位置，即。 左:100px；顶部:40px；。

在完全相同的示例中，我需要它来计算百分比的边距，即。 左边距:20%； margin 顶部:10%；。我需要将 div 置于最终位置。

这可以在 JS/jQuery 中实现吗？我找不到任何关于如何做到这一点的例子，我也不知道如何做到这一点，所以我希望你们能弄明白。

所以最终的结果应该是，如果我计算了 margin right 的百分比，以像素为单位的位置的 div 和以百分比为单位的位置的 div 应该在父 div 中完全相同的位置。

对于那些不看评论的人:

想法是您可以将子元素拖动到 div 中您想要的任何位置，然后以像素为单位获取位置。将其计算为百分比，然后以百分比形式添加边距，因此如果您调整窗口大小 -> 子元素将保持在正确的位置，因为您现在将使用百分比而不是像素。

Answer 1

首先，我想推荐使用 top 和 left 作为定位属性。在您的情况下，您希望将元素定位到父级相对。使用 top 和 left 可以完美地做到这一点，没有任何副作用。

margin 主要用于指示兄弟之间的空间，也用于在父级中定位，例如在使用 Flexbox 或 CSS Grid 时，并且可能有一些意想不到的行为，如渗入父级。

以 % 计算相对顶部和左侧。

在这个例子中，我将向您展示如何将像素值计算为百分比。为此，您必须知道父项的大小 和子项的位置。首先选择父项和子项。

// Select the parent and child elements.
var parent = document.getElementById('parent');
var child = document.getElementById('child');

获取父元素的尺寸。 offsetWidth 和 offsetHeight 表示元素在屏幕上显示的大小(以像素为单位)。

var parentWidth = parent.offsetWidth;
var parentHeight = parent.offsetHeight;

然后获取 child 相对于 parent 的相对的位置。 offsetTop 和 offsetLeft 是子元素相对于父元素的计算位置(以像素为单位)。几乎类似于 CSS 中的 top 和 left 值。

var childOffsetTop = child.offsetTop;
var childOffsetLeft = child.offsetLeft;

现在您有了父级的尺寸和子级的位置。将每个轴上的位置(X:左侧和宽度，Y:顶部和高度)除以父级的大小以计算分数。将该分数乘以 100，您将得到百分比值。

var childOffsetTopPercentage = (childOffsetTop / parentHeight) * 100;
var childOffsetLeftPercentage = (childOffsetLeft / parentWidth) * 100;

这会以百分比形式为您提供 top 和 left 值。将值设置为子元素以将像素值替换为百分比。不要忘记在值后添加 '%' 字符串，使其成为百分比值。

child.style.top = childOffsetTopPercentage + '%';
child.style.left = childOffsetLeftPercentage + '%';