fix: use of sortable js with transition-group #2160
|
@ -88,13 +88,12 @@
|
||||||
@end="saveListPosition"
|
@end="saveListPosition"
|
||||||
handle=".handle"
|
handle=".handle"
|
||||||
:disabled="n.id < 0 || undefined"
|
:disabled="n.id < 0 || undefined"
|
||||||
tag="transition-group"
|
tag="ul"
|
||||||
item-key="id"
|
item-key="id"
|
||||||
:data-namespace-id="n.id"
|
:data-namespace-id="n.id"
|
||||||
:data-namespace-index="nk"
|
:data-namespace-index="nk"
|
||||||
:component-data="{
|
:component-data="{
|
||||||
type: 'transition',
|
type: 'transition-group',
|
||||||
tag: 'ul',
|
|
||||||
name: !drag ? 'flip-list' : null,
|
name: !drag ? 'flip-list' : null,
|
||||||
class: [
|
class: [
|
||||||
'menu-list can-be-hidden',
|
'menu-list can-be-hidden',
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
@start="() => dragBucket = true"
|
@start="() => dragBucket = true"
|
||||||
group="buckets"
|
group="buckets"
|
||||||
:disabled="!canWrite"
|
:disabled="!canWrite"
|
||||||
tag="transition-group"
|
tag="ul"
|
||||||
:item-key="({id}) => `bucket${id}`"
|
:item-key="({id}) => `bucket${id}`"
|
||||||
:component-data="bucketDraggableComponentData"
|
:component-data="bucketDraggableComponentData"
|
||||||
>
|
>
|
||||||
|
@ -133,7 +133,7 @@
|
||||||
:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
|
:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
|
||||||
:disabled="!canWrite"
|
:disabled="!canWrite"
|
||||||
:data-bucket-index="bucketIndex"
|
:data-bucket-index="bucketIndex"
|
||||||
tag="transition-group"
|
tag="ul"
|
||||||
:item-key="(task) => `bucket${bucket.id}-task${task.id}`"
|
:item-key="(task) => `bucket${bucket.id}-task${task.id}`"
|
||||||
:component-data="getTaskDraggableTaskComponentData(bucket)"
|
:component-data="getTaskDraggableTaskComponentData(bucket)"
|
||||||
>
|
>
|
||||||
|
@ -316,8 +316,7 @@ export default defineComponent({
|
||||||
return (bucket) => ({
|
return (bucket) => ({
|
||||||
ref: (el) => this.setTaskContainerRef(bucket.id, el),
|
ref: (el) => this.setTaskContainerRef(bucket.id, el),
|
||||||
onScroll: (event) => this.handleTaskContainerScroll(bucket.id, bucket.listId, event.target),
|
onScroll: (event) => this.handleTaskContainerScroll(bucket.id, bucket.listId, event.target),
|
||||||
type: 'transition',
|
type: 'transition-group',
|
||||||
tag: 'div',
|
|
||||||
name: !this.drag ? 'move-card' : null,
|
name: !this.drag ? 'move-card' : null,
|
||||||
class: [
|
class: [
|
||||||
'tasks',
|
'tasks',
|
||||||
|
@ -337,8 +336,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
bucketDraggableComponentData() {
|
bucketDraggableComponentData() {
|
||||||
return {
|
return {
|
||||||
type: 'transition',
|
type: 'transition-group',
|
||||||
tag: 'div',
|
|
||||||
name: !this.dragBucket ? 'move-bucket' : null,
|
name: !this.dragBucket ? 'move-bucket' : null,
|
||||||
class: [
|
class: [
|
||||||
'kanban-bucket-container',
|
'kanban-bucket-container',
|
||||||
|
|
|
@ -84,8 +84,10 @@
|
||||||
handle=".handle"
|
handle=".handle"
|
||||||
:disabled="!canWrite"
|
:disabled="!canWrite"
|
||||||
item-key="id"
|
item-key="id"
|
||||||
|
tag="ul"
|
||||||
:component-data="{
|
:component-data="{
|
||||||
class: { 'dragging-disabled': !canWrite || isAlphabeticalSorting },
|
class: { 'dragging-disabled': !canWrite || isAlphabeticalSorting },
|
||||||
|
type: 'transition-group'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #item="{element: t}">
|
<template #item="{element: t}">
|
||||||
|
|
Reference in New Issue
Block a user