VueDraggable in Vuetify v-list-item ghost images are mis-positioned and mis-rendered in different browsers

[kaushal1976]

I am trying to use VueDraggable (https://github.com/SortableJS/Vue.Draggable#componentdata) in a Vuetify v-list-item to sort items through drag and drop. However, when dragging rows in the list-items, the ghost image seems mis-positioned in Chrome (see the image). In Safari, the ghost item includes unintended items from the other rows as well (see image), In FF, it looks OK. Any help to resolve this is highly appreciated. Images https://i.stack.imgur.com/YzoLL.jpg, https://i.stack.imgur.com/zXnpG.jpg, https://i.stack.imgur.com/za0cq.jpg

<template>
  <div class="row">
    <div class="col-12">
      <v-list class="py-0">
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="title">Authors</v-list-item-title>
            <v-list-item-subtitle>Manage authors</v-list-item-subtitle>
            <v-spacer></v-spacer>
          </v-list-item-content>
          <v-btn icon @click.stop="authorForm">
            <v-icon color="grey lighten-1">mdi-plus-circle</v-icon>
          </v-btn>
        </v-list-item>
        <v-divider></v-divider>
        <draggable
          v-model="paper.users"
          tag="v-list-item-group"
          :move="checkMove"
          @start="checkStart"
          }
        >
          <template v-for="(user, index) in paper.users">
            <v-list-item @click.stop class="py-0" :key="user.email" ref="item">
              <v-list-item-avatar color="indigo" size="42" class="px-1">
                <span class="white--text headline">{{ index + 1 }}</span>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title
                  class="px-3"
                  v-text="
                    user.title +
                    ' ' +
                    user.firstName +
                    ' ' +
                    user.surname"
                ></v-list-item-title>
                <v-list-item-subtitle class="px-3" v-text="user.email"></v-list-item-subtitle>
              </v-list-item-content>
              <v-list-item-action>
                <v-btn icon>
                  <v-icon @click.stop="deleteAuthor(user)" color="grey lighten-1">mdi-delete</v-icon>
                </v-btn>
                <v-btn icon>
                  <v-icon @click.stop color="grey lighten-1">mdi-drag-horizontal</v-icon>
                </v-btn>
              </v-list-item-action>
            </v-list-item>
          </template>
        </draggable>
      </v-list>
    </div>
  </div>
</template>
<script>
import Paper from "../../store/models/Paper";
import draggable from "vuedraggable";
export default {
  data() {
    return {
      subGroup: true
    };
  },
  props: {
    paper: Object
  },

  methods: {
    authorForm() {
      this.$emit("authorForm");
    },
    deleteAuthor(author) {
      this.$emit("removeAuthor", author);
    },
    checkMove(evt) {
      console.log(evt.draggedContext);
    },
    checkStart(evt) {
      this.evt = evt;
    }
  },
  computed: {},
  components: {
    draggable
  }
};
</script>
<style scoped>
.no-uppercase {
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 768px) {
  .md-full-width {
    width: 100%;
  }
}
.ghost {
  opacity: 0.5;
  background: grey;
}
</style>

[tvld]

With v-card it works fine, no ghosting issues:

        <draggable  v-model="taskLists">
          <transition-group >
            <v-card v-for="(element,index) in taskLists" :key="index" class="mb-2">
              <v-card-text>
                {{ element.name }}
              </v-card-text>

            </v-card>
          </transition-group>
        </draggable>

[tvld]

But I can confirm that using <v-alert/> I get the issue on Chrome as well, but not on Firefox. The standard css:

.v-alert {
    display: block;
    font-size: 16px;
    margin-bottom: 16px;
    padding: 16px;
    position: relative;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

The 'transition' seems to be the issue and adding:

<style lang="scss">
.v-alert {
 transition: none !important;
}
</style>

.. indeed solved the problem.

[jcjp]

.v-alert {
transition: none !important;
}
</style>

This actually fixed my issue however dragging and dropping seems to be sluggish, I am using v-expansion-panel for each item