oprava efektu pre presun Reportu podla konvencie Vue, bez priamej manupulacie s DOM

This commit is contained in:
Igor Miňo 2025-05-03 12:05:40 +02:00
parent fee63b9115
commit 26d66540ef

View File

@ -11,7 +11,12 @@
@end="onDragEnd" @end="onDragEnd"
> >
<template #item="{ element }"> <template #item="{ element }">
<div class="draggable-item"> <div
:class="{
'draggable-item': true,
dragging: isDragable(element),
}"
>
<Report <Report
:title="element.title" :title="element.title"
:description="element.description" :description="element.description"
@ -32,7 +37,12 @@
@end="onDragEnd" @end="onDragEnd"
> >
<template #item="{ element }"> <template #item="{ element }">
<div class="draggable-item"> <div
:class="{
'draggable-item': true,
dragging: isDragable(element),
}"
>
<Report <Report
:title="element.title" :title="element.title"
:description="element.description" :description="element.description"
@ -53,7 +63,12 @@
@end="onDragEnd" @end="onDragEnd"
> >
<template #item="{ element }"> <template #item="{ element }">
<div class="draggable-item"> <div
:class="{
'draggable-item': true,
dragging: isDragable(element),
}"
>
<Report <Report
:title="element.title" :title="element.title"
:description="element.description" :description="element.description"
@ -74,7 +89,12 @@
@end="onDragEnd" @end="onDragEnd"
> >
<template #item="{ element }"> <template #item="{ element }">
<div class="draggable-item"> <div
:class="{
'draggable-item': true,
dragging: isDragable(element),
}"
>
<Report <Report
:title="element.title" :title="element.title"
:description="element.description" :description="element.description"
@ -90,11 +110,17 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
const itemDragable = ref(0);
function onDragStart(evt) { function onDragStart(evt) {
evt.item.classList.add("dragging"); itemDragable.value = evt.item.__vnode.key;
} }
function onDragEnd(evt) { function onDragEnd(evt) {
evt.item.classList.remove("dragging"); itemDragable.value = 0;
}
function isDragable(element) {
return itemDragable.value === element.id;
} }
</script> </script>