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