Drop-placeholder doesn't seem to apply

Hi !

I’m using vue-smooth-dnd to build a kanban board and it’s working well so far. The only thing that isn’t working for me is the :drop-placeholder.

Actually I’m trying to mimic the cards page of the demo.

"vue": "^2.6.10",
"vue-smooth-dnd": "^0.8.1",
"vuetify": "^2.2.21",

      <Container
        group-name="tickets"
        @drop="(event) => onTicketDrop(stage, event)"
        :get-child-payload="getTicketPayload(stage)"
        drag-class="ticket-ghost"
        drop-class="ticket-ghost-drop"
        :drop-placeholder="dropPlaceholderOptions">
        <Draggable
          v-for="ticket in stage.ticketIds"
          :key="ticket.id">
          <v-card outlined class="ticket-card">
            <v-card-title class="subtitle-2">{{ ticket.name }}</v-card-title>
          </v-card>
        </Draggable>
      </Container>

  data () {
    return {
      dropPlaceholderOptions: {
        className: 'drop-preview',
        animationDuration: '150',
        showOnTop: true
      }
    }
  }

  .ticket-ghost {
    cursor: grabbing;
    transition: transform 0.18s ease;
    transform: rotateZ(5deg);
  }
  .ticket-ghost-drop {
    transition: transform 0.18s ease-in-out;
    transform: rotateZ(0deg);
  }
  .drop-preview {
    background-color: rgba(150, 150, 200, 0.1);
    border: 1px dashed red;
    margin: 5px;
  }

What am I doing wrong ?

You can see below that there is no zone with red border that appears :

[thespragg]

Bumping an older issue here but for anyone looking for the answer to this, when using

:drop-placeholder="{ className: '<className>' }"

You need to make sure the css class you’re trying to apply isn’t scoped, for me this meant moving it to an external global css sheet

[laurent-brisbois]

Bumping an older issue here but for anyone looking for the answer to this, when using

:drop-placeholder="{ className: '<className>' }"

You need to make sure the css class you’re trying to apply isn’t scoped, for me this meant moving it to an external global css sheet

Oh god that’s true I’m using a <style scoped> tag… I’m going to try without the scoped attribute.

EDIT : Indeed it works. Thank you !