oprava efektu pre presun Reportu podla konvencie Vue, bez priamej manupulacie s DOM
This commit is contained in:
parent
fee63b9115
commit
26d66540ef
@ -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>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user