Unable to customize dragging item's style

[laurent-brisbois]

"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)

[SmileAjh]

I have the same as problem,Do you have a solution to this problem？

[laurent-brisbois]

@SmileAjh No I haven't any solution yet. Waiting for an answer here.

[sbmthd]

drag-class is not passed via options, it's a prop in itself. For example -

<draggable drag-class="draggable-ghost__class" :options="{group: {name: 'source', pull: 'clone', put: false}, sort: false}" @start="dragStarted" @EnD="dragStopped">

[elias-pap]

@laurent-brisbois You can try using dragOptions instead of options, like in this example. Then you need to use dragClass instead of ghostClass.

[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">

[jcjp]

Try:

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

I tried this but my dragClass is still not applied while dragging. I wanted to change the cursor to grab while dragging but it shows the default cursor icon.

Here is how I applied my dragClass:

<draggable
  id="container"
  drag-class="dragging"
  draggable=".expansion-panel"
  handle=".handle"
  :force-fallback="true"
  :list="items"
>

Just a side-note auto scrolling does not work if forceFallback is false, and when you change forceFallback to true the animation breaks with Mozilla Firefox the list I am sorting is Vuetify expansion panels.

[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?

[guillaume-a26]

Same problem here. I need to change the cursor while dragging an item and to change this item style, but only the ghost and chosen class are added to the element. Is there a fix or news on this issue?

[dimsav]

The way I solved this is by checking the oldIndex value on the @start event. Then, adding a custom class if the index of the dragged element matches the iterated item.

<template>

    <draggable
            v-model="entries"
            @change="sortChangedHandler"
            @start="sortStartedHandler"
            @end="sortEndedHandler"
          >
            <transition-group>
              <div
                :class="[dragged_index === index ? 'bg-meta-gray-100' : '']"
                v-for="(entry, index) in entries"
                :key="entry.id"
              >
                ...
              </div>
            </transition-group>
    </draggable>
</template>

<script>

export default {
  components: { draggable },
  data() {
    return {
      dragged_index: null,
      is_dragging: false,
    }
  },
  methods: {
    sortStartedHandler(event) {
      this.is_dragging = true;
      this.dragged_index = event.oldIndex;
    },
    sortEndedHandler(event) {
      this.is_dragging = false;
      this.dragged_index = null;
    },
    sortChangedHandler(event) {
      this.is_dragging = false;
      this.dragged_index = null;
      // backend submit
    },
  },
}
</script>

[fragamarcio]

The dragClass still inherit the browser default drag item style. To full customization of the drag item preview you can use fallback-class and force-fallback.

<draggable fallback-class="fallbackStyleClass" :force-fallback="true" > ...

[guillaume-a26]

The dragClass still inherit the browser default drag item style. To full customization of the drag item preview you can use fallback-class and force-fallback.

<draggable fallback-class="fallbackStyleClass" :force-fallback="true" > ...

Thanks a lot, it works for me !

[seyfer]

The dragClass still inherit the browser default drag item style. To full customization of the drag item preview you can use fallback-class and force-fallback.

<draggable fallback-class="fallbackStyleClass" :force-fallback="true" > ...

It works well, but I want to change the dragged element width to a smaller width. And when I do it, the cursor is flying nearby while dragging, not on the new small element. This is because the clone element in the dragging event still has the source element width cloned and it is impossible to change cloned element width after the drag start.

Same issue there: https://github.com/SortableJS/Vue.Draggable/issues/948