Как отменить событие перетаскивания Vue-Drag-Resize

Question

После перетаскивания элемента с использованием компонента vue-drag-resize мне нужно проверить координаты, куда элемент был перетащен, и, если это недопустимое местоположение, вернуть координаты туда, где перетаскивание был начат.

Вот пример кода

Здесь я назначаю исходное значение, когда элемент изначально щелкается, чтобы начать движение.

onActivated(index) {
  this.currentFieldIndex = index;
  this.currentField.left = this.fields[this.currentFieldIndex].left;
  this.currentField.top = this.fields[this.currentFieldIndex].top;
}

И затем, когда они останавливают перетаскивание за пределы границ, я пытаюсь переназначить исходные координаты обратно в поле следующим образом:

onDragStop(rect) {
  if (rect.left < 0 || rect.top < 0) {
    this.fields[this.currentFieldIndex].left = this.currentField.left;
    this.fields[this.currentFieldIndex].top = this.currentField.top;
  } else {
    this.fields[this.currentFieldIndex].left = rect.left;
    this.fields[this.currentFieldIndex].top = rect.top;
    this.currentField.x = rect.left;
    this.currentField.y = rect.top;
  }
}

Интересно, что если я просто жестко закодирую координаты сброса, как это (ниже), то все работает нормально:

onDragStop(rect) {
  if (rect.left < 0 || rect.top < 0) {
    this.fields[this.currentFieldIndex].left = 0; //this.currentField.left;
    this.fields[this.currentFieldIndex].top = 0; //this.currentField.top;
  } else {
    this.fields[this.currentFieldIndex].left = rect.left;
    this.fields[this.currentFieldIndex].top = rect.top;
    this.currentField.x = rect.left;
    this.currentField.y = rect.top;
  }
}

Answer 1

Оказывается, так как вы никогда не обновляете свое поле на новое местоположение, когда оно выходит из строя, вы просто устанавливаете то же значение, что и раньше. (Вы начинаете движение с left: 100, top: 100. Тогда, поскольку вы обновляете fields только при «остановке перетаскивания», вы указываете, что поля должны обновляться с полученными вами координатами onActivated (по-прежнему 100, 100).)

Vue не будет регистрировать никаких изменений, если значение === старое. Это приводит к тому, что ваш прямоугольник не возвращается к началу, но опять же, потому что Vue не думает, что что-то новое.

Есть несколько способов решить эту проблему.

Решение 1: Например, вы можете добавить десятичную дробь к вашему новому значению;

onDragStop(rect) {
  if (rect.left < 0 || rect.top < 0) {
    alert("revert!!");
    this.fields[this.currentFieldIndex].left = this.currentField.left + 0.1; //<--
    this.fields[this.currentFieldIndex].top = this.currentField.top + 0.1; //<--
  } else {
    //...
  }
}

Это, конечно, делает ваш прямоугольник на n.

Решение 2: Вы можете постоянно обновлять this.fields[x] с помощью события перетаскивания ;

onDragging(rect) {
  this.fields[this.currentFieldIndex].left = rect.left;
  this.fields[this.currentFieldIndex].top = rect.top;
}

Это более ресурсоемкое решение, но у вас всегда будут правильные значения.