[英]Vue mousemove only after mousedown
如果首先單擊元素,如何觸發鼠標移動? 我正在嘗試將其用於音頻播放器時間線。
.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
放在元素上。 否則,您可以將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>
我最終使用了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
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.