Как перемещать элемент по клику на кнопки?

Question

[Molder84]

Пытаюсь перемещать квадрат с помощью замены параметра transform в div блоке по х и y. При клике по одной кнопке блок передвигается по оси Х как и должен, при клике по второй кнопке передвигается и по Х и по У, хотя должен только по У. Подскажите где ошибка.

https://codepen.io/zocdoobn-the-selector/pen/ExrNBxR

Comments

[0xD34F]

Подскажите где ошибка.

Координата по горизонтали идёт первой. То есть, нулевой:

- m2.style.transform = 'translate(' + left2[1] + 'px,' + new_y  + 'px)'
+ m2.style.transform = 'translate(' + left2[0] + 'px,' + new_y  + 'px)'

Answer 1

[0xD34F]

Вместо выдёргивания координат из стилей лучше будет сделать массив с координатами, обновлять этот массив, и уже на его основе задавать translate элементу. А чтобы не делать отдельные обработчики клика всем кнопкам, можно записать им в data-атрибут информацию о том, на сколько какие координаты должна изменить данная кнопка.

<button data-steps="1,0">right</button>
<button data-steps="-1,0">left</button>
<button data-steps="0,1">down</button>
<button data-steps="0,-1">up</button>
<button data-steps="1,1">right down</button>
<button data-steps="0,-2">double up</button>

const coord = [ 0, 0 ];
const stepSize = 30;

const box = document.querySelector('#box');
const buttons = document.querySelectorAll('[data-steps]');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.dataset.steps.split(',').forEach((n, i) => coord[i] += n * stepSize);
  box.style.transform = `translate(${coord.map(n => `${n}px`).join(',')})`;
}

Answer 2

[Сергей delphinpro]

function getCurrentOffset(s) {
  return s.split(",", 2).map((n) => Number(n.replace(/\D/g, "")));
}
function right2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left+30}px,${top}px)`;
}
function bottom2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left}px,${top+30}px)`;
}

Answer 3

[Алексей Ярков]

https://codepen.io/yarkovaleksei/pen/ExrNBWd
Немного поправил код