Question

我目前正在创建一个电子应用程序（前端在Vue中），该应用程序可以触发本机的“拖放操作”。如果我使用HTML5拖动事件（例如dragstart，dragstop等）触发它们，这些操作的行为就会很奇怪。因此，我必须使用mouseup，mousedown和mousemove实现自己的拖放处理程序。因此，从简单的理论来看：

如果触发了MouseDown->设置标志

如果触发了MouseUp->删除标记
如果MouseMove AND标志-> checkCurrentPosition与initialPosition->做某事

new Vue({
el: "#app",
  data: {
    mousedown: false
  },
  methods: {
    onMouseDown: function(e){
        console.log('mousedown');
        this.mousedown = true;
    },
    onMouseUp: function(e){
        console.log('mouseup');
        this.mousedown = false;
    },
    onMouseMove: function(e){
            if(this.mousedown) {
        console.log('mousedown && mousemove');
        console.log('clientX:', e.clientX);
        console.log('clientY:', e.clientY);
      }
    },
  }
})

Fiddle

如果您查看此示例，请打开浏览器控制台，然后对图像进行一些操作（单击，拖放，...），您将看到，如果拖动占位符图像，则会触发mousedown事件并设置标志。然后，我希望mousemove事件将被频繁触发，但是这没有发生。

通常，如果将mousemove绑定到某个Div，则将鼠标悬停在其上时会频繁触发它，例如，您可以获得实际位置。但这在鼠标按下后不会发生。

注意：Fiddle中的mouseup事件未绑定到Window，因此，如果将Element放到其区域之外，则不会触发该元素的mouseup事件。因此，不会删除该标志，然后您可以看到我期望的行为。 mousemove事件经常被触发。因此，我认为问题在于，当按下鼠标时，mousemove事件未正确触发。

自定义拖放功能的奇怪行为

0 个答案: