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：，您可以通过dragging event不断更新this.fields[x];

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

这是一个占用更多资源的解决方案，但是您始终始终具有正确的值。

如何还原Vue-Drag-Resize拖动事件

1 个答案: