the vue-draggable component is blocking onclick events that are located inside a list element. when I comment out the draggable package my menu click works again. when I insert the draggable works but not the menu.
parent (the onclick event is located in VListItem prop append-icon. inside ListMenu i trigger an onclick on an icon that opens a menu ):
` <VueDraggableNext
:list="generalListData"
@change="($event) => updateClassifsListChange($event)"
ghostClass="ghost"
:style="isListItemClicked ? 'cursor: grabbing' : 'cursor: grab'"
@choose="() => (isListItemClicked = true)"
@unchoose="() => (isListItemClicked = false)"
<VListGroup
v-if="generalListData.length > 0"
v-for="(classifs, i) in filterGeneralList"
:key="i"
the vue-draggable component is blocking onclick events that are located inside a list element. when I comment out the draggable package my menu click works again. when I insert the draggable works but not the menu.
parent (the onclick event is located in VListItem prop append-icon. inside ListMenu i trigger an onclick on an icon that opens a menu ): ` <VueDraggableNext :list="generalListData" @change="($event) => updateClassifsListChange($event)" ghostClass="ghost" :style="isListItemClicked ? 'cursor: grabbing' : 'cursor: grab'" @choose="() => (isListItemClicked = true)" @unchoose="() => (isListItemClicked = false)"
import { defineComponent, PropType } from 'vue'; import { useAdminStore } from '~~/store'; import { v4 as uuid } from 'uuid'; import { IndexesIJK } from '../AdminTypes'; export default defineComponent({ name: 'ListMenu', props: { iconColor: { required: false, type: String, default: 'primary', }, iconType: { required: true, type: String as PropType<'menu' | 'add'>, default: 'menu', }, listType: { required: false, type: String as PropType<'A' | 'B' | 'C'>, default: 'A', }, targetedId: { required: false, type: String, }, fieldType: { required: false, type: String as PropType<'classifs' | 'classItem' | 'subclass'>, }, fieldId: { required: true, type: String, }, colorPicker: { required: true, type: Boolean, }, classificationType: { required: false, type: String as PropType<'PRIVATE' | 'LEGAL'>, }, isGeneralType: { require: false, type: Boolean, default: false, }, listItemIndex: { required: false, type: Object as PropType,
default: null,
},
listOpenValue:{
required: true,
type: Boolean,
default: false
}
},
emits: ['showSelectedAddFields', 'updateClassifs', 'listMenuOpen'],
setup() {
const adminStore = useAdminStore();
return { adminStore };
},
data() {
return {
addDialogOpen: false,
newField: '',
listA: [
{ title: 'Löschen', value: 1 },
// { title: 'Bearbeiten', value: 2 },
],
listB: [
{ title: 'Hinzufügen', value: 1 },
{ title: 'Löschen', value: 2 },
// { title: 'Bearbeiten', value: 3 },
],
listC: [{ title: 'Löschen', value: 1 }],
};
},
methods: {
openFieldOverlay() {
this.addDialogOpen = true;
},
}, });