Javascript 使用Vue移动SVG

我正在尝试实现一个功能，它允许我

鼠标向下

并拖动SVG形状。我已经具备了基本功能，但我无法理解为什么在我拖动形状然后执行

mouseup

事件后，当我再次尝试拖动同一形状时，形状不会随鼠标位置一起拖动。形状保持静止，只有当我再次执行

mouseup

时，形状才会再次开始跟随鼠标位置

下面是我编写的一个mixin，它扩展了可移动行为：

const Moveable = {
    data () {
      return {
         x: '',
         y: '',
         coords: {
           x: 0,
           y: 0
         }
      }
    },
    methods: {
      handleMouseMove(e) {
        const xDiff = this.coords.x - e.pageX;
        const yDiff = this.coords.y - e.pageY;

        this.coords.x = e.pageX;
        this.coords.y = e.pageY;
        this.x = this.x - xDiff;
        this.y = this.y - yDiff;
      },
      handleMouseDown(e) {
        this.coords = {
          x: e.pageX,
          y: e.pageY
        };
        document.addEventListener("mousemove", this.handleMouseMove);
      },
      handleMouseUp() {
        document.removeEventListener("mousemove", this.handleMouseMove);
       this.coords = {};
      }
    }
}

下面是演示问题的演示：

---

为什么形状只有在第一次移动时才能正确拖动，而对于后续拖动，它不会立即跟随鼠标位置？

问题在于，如果开始拖动

第一个元素
，并在
第二个元素
上拖动鼠标，则会调用
第二个元素
的handleMouseUp（实际上应该调用第一个元素的mouseup）

解决方案：

您必须在鼠标向上移动时删除所有事件侦听器。
问题是，如果您开始拖动
第一个元素
并在
第二个元素
上移动鼠标，则会调用
第二个元素
的handleMouseUp（实际上应该调用
第一个元素
的鼠标）

let myElement = {}
const Moveable = {
  data () {
    return {
      x: '',
      y: '',
      coords: {
        x: 0,
        y: 0
      }
    }
  },
//  myElement : Any,
  methods: {
    handleMouseMove(e) {
      const xDiff = this.coords.x - e.pageX;
      const yDiff = this.coords.y - e.pageY;

      this.coords.x = e.pageX;
      this.coords.y = e.pageY;
      this.x = this.x - xDiff;
      this.y = this.y - yDiff;
    },
    handleMouseDown(e) {
      this.coords = {
        x: e.pageX,
        y: e.pageY
      };
      myElement = this;
      document.addEventListener("mousemove", myElement.handleMouseMove);
    },
    handleMouseUp() {
      document.removeEventListener("mousemove", myElement.handleMouseMove);
      myElement.coords = {};
    }
  }
}

解决方案：

您必须在鼠标向上移动时删除所有事件侦听器。
您可能需要在鼠标向下移动时存储元素，然后可以在鼠标向上移动时删除正确元素的事件处理程序

let myElement = {}
const Moveable = {
  data () {
    return {
      x: '',
      y: '',
      coords: {
        x: 0,
        y: 0
      }
    }
  },
//  myElement : Any,
  methods: {
    handleMouseMove(e) {
      const xDiff = this.coords.x - e.pageX;
      const yDiff = this.coords.y - e.pageY;

      this.coords.x = e.pageX;
      this.coords.y = e.pageY;
      this.x = this.x - xDiff;
      this.y = this.y - yDiff;
    },
    handleMouseDown(e) {
      this.coords = {
        x: e.pageX,
        y: e.pageY
      };
      myElement = this;
      document.addEventListener("mousemove", myElement.handleMouseMove);
    },
    handleMouseUp() {
      document.removeEventListener("mousemove", myElement.handleMouseMove);
      myElement.coords = {};
    }
  }
}

您可能需要在鼠标向下移动时存储元素，然后可以在鼠标向上移动时删除正确元素的事件处理程序

let myElement = {}
const Moveable = {
  data () {
    return {
      x: '',
      y: '',
      coords: {
        x: 0,
        y: 0
      }
    }
  },
//  myElement : Any,
  methods: {
    handleMouseMove(e) {
      const xDiff = this.coords.x - e.pageX;
      const yDiff = this.coords.y - e.pageY;

      this.coords.x = e.pageX;
      this.coords.y = e.pageY;
      this.x = this.x - xDiff;
      this.y = this.y - yDiff;
    },
    handleMouseDown(e) {
      this.coords = {
        x: e.pageX,
        y: e.pageY
      };
      myElement = this;
      document.addEventListener("mousemove", myElement.handleMouseMove);
    },
    handleMouseUp() {
      document.removeEventListener("mousemove", myElement.handleMouseMove);
      myElement.coords = {};
    }
  }
}

你们修好了吗？看起来你们的代码笔工作得很好（chrome），我建议你们在鼠标下降时附加move和mouse up监听器，在鼠标下降时删除这两个监听器up@SergeyRudenko这似乎只发生在FireFox上！在Chrome中对我来说很好。你修复了吗？你的代码笔似乎工作得很好（Chrome）另外，我建议在mouse-down上附加move和mouse-up侦听器，并在mouse-down上删除这两个侦听器up@SergeyRudenko似乎这只发生在FireFox上！在Chrome中对我来说很好。但是应该保留well mousedown，但是其他的（移动，向上）应该被删除。但是应该保留well mousedown，但是其他的（移动，向上）应该删除。