Vue mousemove 仅在 mousedown 之后答案

【问题标题】：Vue mousemove only after mousedownVue mousemove 仅在 mousedown 之后
【发布时间】：2018-01-08 14:27:45
【问题描述】：

如何仅在先单击元素时触发鼠标移动？我正在尝试将其用于音频播放器时间线。

.player__time--bar(@mousedown="setNewCurrentPosition($event)")
    .slider(role="slider" aria-valuemin="0" :aria-valuenow="currentPosition" :aria-valuemax="trackTotalDuration" aria-orientation="horizontal")
        .player__time--bar-current-position(:style="{width:  (100 / (trackTotalDuration / currentPosition)) + '%'}")

方法：

setNewCurrentPosition(e) {
    let tag = e.target
    // if the click is not on 'slider', grab div with class 'slider'
    if (e.target.className === 'player__time--bar') tag = e.target.firstElementChild
    else if (e.target.className === 'player__time--bar-current-position') tag = e.target.parentElement
    const pos = tag.getBoundingClientRect()
    const seekPos = (e.clientX - pos.left) / pos.width
    this.currentPosition = parseInt(this.trackTotalDuration * seekPos)
    // updates the time in the html
    this.$refs.player.currentTime = this.currentPosition
},

【问题讨论】：

您遇到什么错误？您提供的代码中的某些内容不起作用吗？
在时间栏上的 mousedown 上设置一个变量。在任何地方取消设置 mouseup 上的变量。将 mousemove 包裹在 if 中，检查变量是否已设置。
@RoyJ 好的，这很可行，但是我如何调用函数 mousemove
@PatrickSteele 我所拥有的只是点击。如果您单击并拖动，我希望能够移动位置。基本上是模拟输入类型范围

标签： javascript vue.js vuejs2 mousedown

【解决方案1】：

您将希望在您的元素上有一个mousedown 侦听器，该侦听器设置一个变量以指示拖动开始。在窗口上放置一个监听器以在任何地方捕获mouseup 并取消设置变量。

如果您只对元素内部发生的拖动感兴趣，可以将mousemove 放在元素上。否则，您可以将 mousemove 侦听器放在 window 上，这样您就可以在任何地方捕获它。

new Vue({
  el: '#app',
  data: {
    dragging: false,
    x: 'no',
    y: 'no'
  },
  methods: {
    startDrag() {
      this.dragging = true;
      this.x = this.y = 0;
    },
    stopDrag() {
      this.dragging = false;
      this.x = this.y = 'no';
    },
    doDrag(event) {
      if (this.dragging) {
        this.x = event.clientX;
        this.y = event.clientY;
      }
    }
  },
  mounted() {
    window.addEventListener('mouseup', this.stopDrag);
  }
});

.dragstartzone {
  background-color: red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div class="dragstartzone" @mousedown="startDrag" @mousemove="doDrag">Start dragging here</div>
  <div>X: {{x}}, Y: {{y}}</div>
</div>

【讨论】：

太棒了！谢谢你。我重新调整了一下以适应我的需要。我将在下面发布代码sn-p
还有一个问题...不能真正在移动设备上工作：/
对。您必须使用touch events，因为没有鼠标按钮。应该与 touchstart touchend 和 touchmove 相同。
运气不好，我认为Vue默认不支持@touch...
没关系，都想通了。只需要抓住一些不同的属性。再次感谢

【解决方案2】：

我最终使用了 Roy J 提供的代码，并对其进行了一些重构以满足我的需要。在这里

模板：

.player__time--bar(@mousedown="startDrag($event)" @mouseup="stopDrag($event)" @mousemove="doDrag($event)")
    .slider(role="slider" aria-valuemin="0" :aria-valuenow="currentPosition" :aria-valuemax="trackTotalDuration" aria-orientation="horizontal")
        .player__time--bar-current-position(:style="{width:  (100 / (trackTotalDuration / currentPosition)) + '%'}")

数据：

data: () => ({
    currentPosition: 0,
    trackTotalDuration: 0,
    dragging: false
}),

方法：

startDrag() {
    this.dragging = true
},
stopDrag(event) {
    this.dragging = false
    this.setNewCurrentPosition(event)
},
doDrag(event) {
    if (this.dragging) this.setNewCurrentPosition(event)
},

setNewCurrentPosition(e) {
    let tag = e.target
    // if the click is not on 'slider', grab div with class 'slider'
    if (e.target.className === 'player__time--bar') tag = e.target.firstElementChild
    else if (e.target.className === 'player__time--bar-current-position') tag = e.target.parentElement
    const pos = tag.getBoundingClientRect()
    const seekPos = (e.clientX - pos.left) / pos.width
    this.currentPosition = parseInt(this.trackTotalDuration * seekPos)
    // updates the time in the html
    this.$refs.player.currentTime = this.currentPosition
},

【讨论】：