Получить маржу из перетаскиваемого дочернего элемента в div?

Question

Можно ли получить margin-left, right, top и bottom перетаскиваемого элемента? Например, я нашел эту JS Fiddle , которая показывает вам, что я имею в виду. Проблема здесь в том, что он дает вам только положение вашего дочернего элемента в пикселях, т.е. left: 100px; top: 40px;.

В том же примере мне нужно было бы рассчитать, какая маржа в процентах, т.е. margin-left: 20%; margin-top: 10%;. Мне нужно получить div в конечной позиции.

Возможно ли это сделать в JS / jQuery? Я не смог найти никаких примеров того, как это сделать, и я не имел ни малейшего понятия, как это можно сделать, поэтому я надеюсь, что вы, ребята, сможете это выяснить.

Так что конечный результат должен состоять в том, что если я вычислюпроцент от правого поля, div с позицией в пикселях и div с позицией в процентах должны быть точно такими же в родительском div.

Для людей, которые не читают комментарии:

Идея состоит в том, что вы можете перетащить дочерний элемент в любое место в div, а затем получить позицию в пикселях. посчитайте это в процентах, затем добавьте поля в процентах, так что если вы, например, измените размер окна -> дочерний элемент останется на правильном месте, потому что вы будете использовать процент вместо пикселов.

Answer 1

Сначала я хочу начать с рекомендации использования top и left в качестве ваших свойств позиционирования. В вашем случае вы хотите поместить элемент относительно в родительский элемент. Использование top и left может сделать это совершенно без каких-либо побочных эффектов.

margin в основном используется для указания пространства между братьями и сестрами, а также для позиционирования в родительском элементе, например, при использовании Flexbox или CSS Grid, и может иметь непредвиденное поведение, например, прохождение через родительский элемент.

Рассчитать относительные значения Top и Left в%.

В этом примере я покажу вам, как вычислять значения из пикселей в процентах. Для этого вы должны знать , насколько велик родитель и , где ребенок. Сначала выберите родительский и дочерний элементы.

// 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;

Затем укажите положение дочернего элемента относительно относительно родительского элемента. offsetTop и offsetLeft - это рассчитанные позиции в пикселях дочернего элемента относительно родительского элемента. Почти аналогично значениям top и left в CSS.

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 + '%';