Vue只在mousedown之后移动

Question

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

.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
},

Answer 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> 

Answer 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
},