@end is not called when dragging last element from one list to another

[gregveres]

Jsfiddle link

I tried to create a jsfiddle but I couldn't get vuedraggable to drag between two lists even though they had the same group.

Step by step scenario

I have two lists. I happen to be using with tag="tbody".

   <template v-for="group in groups">
      <draggable v-model="group.types" tag="tbody" group="types" @end="end">
        <template v-for="t in group.types">
          <tr :key="t.id">
...
            </tr>
       </template>
     </draggable>
  </template>

So I have a list of lists. I am capturing the moving of one of the elements by using the @end event.

Actual Solution

When I have 2 elements in the source list and 1 element in the destination list, the @end is called properly. But when I have 1 element in the source list and some elements in the destination list, the @end is not called when the drop happens.

The item does get moved to the destination list, but @end isn't called.

Expected Solution

When @end is always called.

[pv-konstantinov]

Also encountered very similar issue. Surprisingly, devtools showed that the end event was always fired. But for some reason the eventlistener v-on="end" was not executing what's needed..

In my case the problem narrowed down to the wrapper of <draggable> component. Namely it was subject to v-if directive (hence, <draggable> was rendered only when source array is not empty). When you move the last element from array - source array becomes empty (I presume on remove event) and <draggable> component that emits end is removed from DOM.

Solution that worked for me is on the surface - replace v-if with v-show.

[oscarhandsome]

@cruelgroo thanks! your solution helped me!

[gregveres]

@cruelgroo thank you too! I believe that is my problem. The list I am dragging from is controlled with a v-if. I changed it to a v-show and now I get those last items.

[witoldwegner]

Hi,

I have the same problem, but in my case the different lists are built with v-for. When I dragg from one list to another @end is not fired.

I have now worked around with "watch", but it would be nice if @end was fired also in this case.

Thanks, Witold