В настоящее время я создаю электронное приложение (Frontend в Vue), которое может запускать собственные операции перетаскивания. Эти операции ведут себя странно, если я запускаю их с помощью перетаскивания HTML5 (например, dragstart, dragstop и т. Д.). Поэтому я должен реализовать свой собственный обработчик перетаскивания, используя mouseup, mousedown и mousemove. Итак, в простой теории:
Если срабатывает MouseDown -> Установить флаг
Если активирован MouseUp -> Удалить флаг
Если MouseMove AND Flag -> 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);
}
},
}
})
Скрипка
если вы проверите этот пример, откройте консоль браузера и поэкспериментируйте с изображением (щелкните, перетащите и отпустите, ...), вы увидите, что при перетаскивании изображения-заполнителя запускается событие mousedown. и флаг установлен. Тогда я ожидал бы, что событие mousemove будет часто запускаться, но этого не происходит.
Обычно, если вы привязываете мышиное движение к какому-либо элементу Div, оно часто срабатывает, если вы наводите курсор мыши над ним, и вы можете получить фактическую позицию, например. Но это не происходит после mousedown.
ПРИМЕЧАНИЕ. Событие mouseup в Fiddle не привязано к Window, поэтому, если вы уроните элемент за пределы его области, событие mouseup не будет инициировано для элемента. Таким образом, флаг не удаляется, и тогда вы можете увидеть поведение, которое я ожидаю. событие mousemove часто срабатывает. Поэтому я думаю, что проблема в том, что при нажатии мыши событие перемещения мыши не запускается правильно.