ghostClass - chosenClass - dragClass

[frck006]

Hi,

I think there is a problème with "ghostClass" - "chosenClass", "ghost" doesn't apply.

I use your "simple.vue" example and add 3 styles:

.ghost {
  opacity: 0.5;
  background: red;
}
.chosen {
  opacity: 0.5;
  background: blue;
}
.drag {
  opacity: 0.5;
  background: green;
}

Your component:

      <draggable
        :list="list"
        :disabled="!enabled"
        class="list-group"
        ghost-class="ghost"
        chosen-class="chosen"
        drag-class="drag"
        :move="checkMove"
        @start="dragging = true"
        @end="dragging = false"
      >

[frck006]

I just understand that I use the same css properties for ghost and choosen.

[frck006]

En fact, there is a problem, the "ghost" class should be replace "chosen" class but it's not the case.

[AprilTomatoQQ]

I got the same problem, the background can't be applied.

[David-Desmaisons]

@frck006 could you explain better the problem? Did you check sortable repo for similar issue?

[frck006]

@David-Desmaisons no, I did not watch "sortable" repo. I try this afternoon.

About the problem, when can we see css from "ghost" ? Normaly, I should see "red", but only "blue" or "green" are displayed.

PS: Version :

• vuedraggable: 2.23.2
• sortable: 1.10.1

[frck006]

@David-Desmaisons You're right, there is the same behavior from "sortable.js" I don't see when "ghost" class is apply.

I create a new issue in "sortable.sj": https://github.com/SortableJS/Sortable/issues/1795

[laics1984]

Any way to change the text in the chosen class? Like from the text in the element to "moving" etc? When only display the element text once the drag ends?

[benben994]

Same issue here with chosen/drag class working but not working with ghost class. I found that the simple example is working with ghost class, which changes the background color. But I couldn't figure out why it works, and it's caused by SortableJS or Vue Draggable. I've tried

1. ghostClass="ghost"
2. ghost-class="ghost"
3. v-bind="ghostClass: '.ghost'"