Я хочу разместить центр элемента там же, где был нажат:
Для этого я хочу использовать transform, но для исходного свойства css я не могу использовать:
#element{
position:fixed;
top:0;
left:0;
transform:translate(-50%, -50%);
}
Поскольку исходная ссылочная позиция одинакова и при использовании
transform , она не будет работать при переводе, используйте следующие примеры:
let action1=document.querySelector("#actions1");
let action2=document.querySelector("#actions2");
let action3=document.querySelector("#actions3");
let action4=document.querySelector("#actions4");
let boton1=document.querySelector("#me1");
let boton2=document.querySelector("#me2");
let boton3=document.querySelector("#me3");
let boton4=document.querySelector("#me4");
boton1.addEventListener("click",move1);
boton2.addEventListener("click",move2);
boton3.addEventListener("click",move3);
boton4.addEventListener("click",move4);
function move1(e){
let startX=e.clientX || e.touches[0].clientX;
let startY=e.clientY || e.touches[0].clientY;
action1.style.display="grid";
action2.style.display="none";
action3.style.display="none";
action4.style.display="none";
action1.style.transform="translate("+startX+"px,"+startY+"px)";
}
function move2(e){
let startX=e.clientX || e.touches[0].clientX;
let startY=e.clientY || e.touches[0].clientY;
action2.style.display="grid";
action1.style.display="none";
action3.style.display="none";
action4.style.display="none";
action2.style.transform="translate("+startX+"px,"+startY+"px)";
}
function move3(e){
let startX=e.clientX || e.touches[0].clientX;
let startY=e.clientY || e.touches[0].clientY;
action3.style.display="grid";
action1.style.display="none";
action2.style.display="none";
action4.style.display="none";
action3.style.transform="translate("+startX+"px,"+startY+"px)";
}
function move4(e){
let startX=e.clientX || e.touches[0].clientX;
let startY=e.clientY || e.touches[0].clientY;
action4.style.display="grid";
action1.style.display="none";
action2.style.display="none";
action3.style.display="none";
let size=action4.getBoundingClientRect();
action4.style.top=startY-(size.height/2)+"px";
action4.style.left=startX-(size.width/2)+"px";
}
#actions1,#actions2,#actions3,#actions4{
display:none;grid-template-columns:auto;grid-gap:5px;
padding:10px;
}
#actions1{
position:fixed;top:0;left:0;
}
#actions2{
position:fixed;top:0;left:0;
transform:translate(-50%, -50%);
}
#actions3{
position:fixed;top:-40px;left:-45px;
}
#actions4{
position:fixed;top:0;left:0;
}
#botons{
position:fixed;
top: 50px;left:0;right:0;
display:flex;
justify-content: space-around;
}
<div id="botons">
<button id="me1">normal</button>
<button id="me2">not posible to reference with transform</button>
<button id="me3">desirable</button>
<button id="me4">old school</button>
</div>
<div id="actions1">
<button>open1</button>
<button>new1</button>
<button>delete1</button>
</div>
<div id="actions2">
<button>open2</button>
<button>new2</button>
<button>delete2</button>
</div>
<div id="actions3">
<button>open3</button>
<button>new3</button>
<button>delete3</button>
</div>
<div id="actions4">
<button>open4</button>
<button>new4</button>
<button>delete4</button>
</div>
Как видите, первый пример и второй ведут себя одинаково, поскольку исходная ссылочная позиция элемента не изменяется, оба имеют:
#element{
position:fixed;top:0;left:0;
}
Третий пример показывает желаемый результат, но этот метод заставляет меня все время знать ширину и высоту, он не будет работать, если я добавлю детей к этому элементу, последний пример показывает, как старая школа будет это делать, что будет принимая размер, а затем делим на 2, проблема в том, что это хак, и потому что преобразование имеет
лучшую производительность по сравнению с изменением позиции напрямую.