Currently in the process of developing a Vue application utilizing a Pinia store system.
Within my BoxView.vue component, I have created a grid layout with draggable elements that have flip functionality implemented within the BoxItem.vue component.
Specifically in the BoxView.vue, there is an EventListener for "mousedown" attached to a "flip-box" element triggering the moveItemInit function:
<template>
<div class="boxes-grid">
<div v-for="(box, index) in getAllBoxes" :key="index" class="box-space">
<BoxItem :id="box.id" @mousedown = 'moveItemInit($event.currentTarget as HTMLElement, $event)'> // <--------------------
<template v-slot:front>
<h2>{{ box.frontText }}</h2>
</template>
<template v-slot:back>
<h2>{{ box.backText }}</h2>
</template>
</BoxItem>
</div>
</div>
</template>
Inside the BoxItem.vue component, there is a function called "rotateInner" that allows flipping an element on right-click:
<template>
<div class="flip-box" @contextmenu.prevent="rotateInner" > // <--------------------
<div class="flip-box-inner" :class="{ 'flipped': isFlipped }">
<div class="flip-box-front">
<slot name="front"></slot>
</div>
<div class="flip-box-back">
<slot name="back"></slot>
</div>
</div>
</div>
</template>
<script setup>
...
async function rotateInner(event: MouseEvent) {
if (event.button === 2) {
event.preventDefault()
event.stopPropagation()
isFlipped.value = !isFlipped.value
}
}
</script>
The issue arises when the moveItemInit function eventually attaches an EventListener to the entire document like so:
document.onmousemove = (eventNew) => moveItem(flipBoxElement, eventNew);
The "moveItem" function enables dragging an element by holding down the left mouse button across the page without restrictions. My goal is to be able to flip the element with a right click while it's being dragged. However, whenever I attempt this, the element stops moving and reverts back to its initial position, indicating premature activation of
document.onmouseup = (eventNew) => moveItemEnd(flipBoxElement, eventNew);How can I prevent right-click from interrupting the onmousemove event, ensuring both dragging and flipping functionalities work smoothly together? Any assistance would be highly appreciated!
https://i.sstatic.net/yRK4r.gif
I've already tried using event.preventDefault() and event.stopPropagation() without success.
I anticipated that a right mouse click would not interfere with maintaining the left mouse button pressed down and activating the "moveItem" function.