Как переписать код перемещения блока мышью с чистого js на vue?

Question

[Anton8989]

Есть код на js:

<div class="block1" id="circle"></div>

var div = document.getElementById('circle');
var listener = function(e) {
  div.style.left = e.pageX - 50 + "px";
  div.style.top = e.pageY - 50 + "px";
};

circle.addEventListener('mousedown', e => {
    document.addEventListener('mousemove', listener);
});

circle.addEventListener('mouseup', e => {
    document.removeEventListener('mousemove', listener);
});

.block1 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50px;
  top: 50px;
  border-radius: 50%;
  background: blue;
}

Как его переписать с использованием vue?

Answer 1

[0xD34F]

Вместо обновления стилей напрямую хранить координаты в массиве, обновлять этот массив, значения из массива использовать для задания стилей (можно оформить стили как вычисляемое свойство, имеющее в качестве зависимости координаты). Примерно так:

const coords = reactive([ 50, 50 ]);

const circleStyles = computed(() => ({
  left: `${coords[0]}px`,
  top: `${coords[1]}px`,
}));

const updateCoords = e => (coords[0] += e.movementX, coords[1] += e.movementY);
const updateCoordsOn = () => document.addEventListener('mousemove', updateCoords);
const updateCoordsOff = () => document.removeEventListener('mousemove', updateCoords);

<div
  class="circle"
  :style="circleStyles"
  @mousedown="updateCoordsOn"
  @mouseup="updateCoordsOff"
></div>