Как перевести перевести top в translateY?

Question

[ymfront]

На странице есть скрипт перетаскивания элемента.
При перетаскивании элементов отслеживается изменение позиционирования:

function positionCalc(){
	let draggableElement = $(".FIkVb9cq");
	let parent = draggableElement.offsetParent();
	let topPosition = draggableElement.position().top;
	let leftPosition = draggableElement.position().left;
	let rightPosition = parent.width() - draggableElement.width() - leftPosition;
	let bottomPosition = parent.height() - draggableElement.height() - topPosition;
	return [topPosition, leftPosition, rightPosition, bottomPosition];
}

Но мне также нужно как-то рассчитывать свойство translateY при top: 50%.

То есть будет кнопка типа "Пересчитать в translateY". И получить значение свойства translateY при top: 50%.

Можно ли это реализовать?

Comments

[Ankhena]

Можно.
Если знать как translateY меняется в зависимости от top.
В вашем примере оно никак не меняется.

Если вы имели в виду два варианта позиционирования, абсолютом или статик с трансформом, то расчет совсем элементарный. Если что-то другое, то имеет смысл указать это в вопросе.

Answer 1

[Михаил Р.]

Можно ли это реализовать?

Можно! Элемент с position: top вычисляет расстояние от верхнего края текущего элемента, до верхнего края ближайшего подходящего (например, position: relative) родителя (либо до viewport), а translate от фактического текущего положения элемента. Теперь включаем логику и применяем методы offsetParent(), height(), position().top итп.