Unable to customize dragging item's style

"vue": "^2.6.10",
"vuedraggable": "^2.23.2",
"vuetify": "^2.2.21",

Step by step scenario

I’m trying to customize the element that is actually being dragged (not the ghost one) but couldn’t manage to do so. I’m using this options variable :

:options="draggableTicketOptions" on my draggable elements, which contains :

draggableTicketOptions: {
        group: 'tickets',
        chosenClass: 'chosen-ticket',
        dragClass: 'dragging-ticket',
        ghostClass: 'ghost-ticket',

      }

However the dragging-ticket doesn’t seem to apply.

See the whole code :

      <draggable
        :options="draggableTicketOptions"
        :list="stage.ticketIds"
        @change="changeTicketStage($event, stage)"
        class="list-group">
        <v-card
          v-for="ticket in stage.ticketIds"
          :key="ticket.id"
          class="list-group-item ticket-card"
          outlined>
          <v-card-title class="subtitle-2">{{ ticket.name }}</v-card-title>
        </v-card>
      </draggable>

(v-card is a Vuetify element) (by the way I’m trying to rebuild a design such as this one : LINK)

[kolaente]

Any news on this? It looks like this still doesn’t work.

There’s a few issues about this: https://github.com/SortableJS/Vue.Draggable/issues/780 https://github.com/SortableJS/Vue.Draggable/issues/983 https://github.com/SortableJS/Vue.Draggable/issues/802

@David-Desmaisons Do you maybe have an idea?

[David-Desmaisons]

Try:

<draggable
        group="tickets"
        chosenClass="chosen-ticket"
        dragClass="dragging-ticket"
        ghostClass="ghost-ticket"
        :list="stage.ticketIds"
        @change="changeTicketStage($event, stage)"
        class="list-group">