Issue with placeholder in list transitions

[vividvilla]

When transition group is applied over the list vddl-draggable the placeholder doesn't work as expected since transition group by default inserts a span over the element and placeholder vddl-placeholder is outside the wrapped span. Is there any workaround for this?

[hejianxian]

@vividvilla Hi!

Thank you for using vddl. 😋

But, I do not understand your question, whether it can provide more description, or paste your code?

[vividvilla]

My code is somewhat like this

<vddl-list class="list-flat" :list="items" :drop="handleDragDrop" :horizontal="false">
  <transition-group name="list">
    <vddl-draggable class="instrument" v-for="(item, $index) in items"
      :draggable="item" :index="$index" :wrapper="items" effect-allowed="move"
      :moved="handleDragMoved">
      {{ item }}
    </vddl-draggable>
  </transition-group>

  <vddl-placeholder></vddl-placeholder>
</vddl-list>

Since I have wrapped the list items with transition-group drag and move feature is broken for me. This is because vddl-placeholder is moved across the list when you drag and move but because of transition-group inserting span tag to wrap all vddl-draggable items it can't move one level below.

Let me know if you got it else I will create a jsbin and post it here.

[hejianxian]

I tried to write a transition demo, but the feeling vddl is not suitable for adding animation effects. If you use <transition-group>, because it renders an actual element, such as span, or any tag attribute set.

However, this will break the list structure of vddl.

If you have to do this, you can only change the vddl-list element to <transition-group>.

<template>
  <transition-group name="list" class="vddl-list" tag="div">
    <slot></slot>
  </transition-group>
</template>

but this also causes the vddl-placeholder to be problematic because vddl itself controls the hiding and display of placeholder, which may cause conflicts with transition-group.

[vividvilla]

Adding the class didn't help but as you said the fix might change structure of this lib but I feel transitions are very common and more users might want to use it. For now I am planning to fork it and maintain it just for my project and if its good enough then I will give a PR.

[hejianxian]

@vividvilla Thanks again!

My main concern is that this change may completely break the original logic. Like react-beautiful-dnd, the animation is great, but it's not based on HTML5 Drag & Drop api. If you want to achieve animation, you may first have to change the way to deal with placeholder element hidden and display behavior.

If you have any good ideas, I would like to discuss with you. Look forward to your PR. 👍

[andreasvirkus]

@vividvilla would you like to add a PR? Also interested in using transition-group