issue with drag-class / styling ghost emelent

[bhaviljain68]

Hi,

I've been trying to style the ghost element, but have been unsuccessful.

I'm using Laravel, InertiaJS, VueJS & TailwindCSS

When I apply drag-class="bg-red-500" to the <Container> element, only the drag-handle area is getting the background color.

when I try to give a custom (on-drag) class to the drag-class prop, nothing happens. I tried using scoped and non scoped style tag, I even tried putting the class in the app.blade.php file (where Inertia renders Vue. i.e. the root vue element).

An excerpt of my code

<Container
          lock-axis="y"
          drag-handle-selector=".handle"
          group-name="questions"
          :get-child-payload="getQuestionChildPayload(sectionIndex)"
          @drop="onDrop($event, sectionIndex)"
          drag-class="text-red-500"
          auto-scroll-enabled
        >
          <!-- Questions -->
          <Draggable
            v-for="(question, index) in formStructure.sections[sectionIndex].questions"
            class="px-2 md:px-6 py-1 text-2xl border-b border-primary border-opacity-40"
            :key="`section-${sectionIndex}-question-${question.id}`"
            :index="index"
            @click="formStructure.setActiveQuestion(sectionIndex, index)"
          >
            <!-- Drag Icon / Anchor -->
            <FadeTransition>
              <div
                class="w-full flex justify-center"
                v-if="formStructure.isActiveQuestion(sectionIndex, index)"
              >
                <div class="!w-[28px] flex justify-center">
                  <i-ci-drag-horizontal
                    class="hover:text-primary text-base-content cursor-grab transition-all duration-200 handle"
                  />
                </div>
              </div>
            </FadeTransition>
            <!-- Question -->
            <QuestionStatement
              v-model="question.statement"
              :required="(question as (ChoiceClass | ScaleClass | TextClass | MatrixClass)).required"
              :index="index"
              :isActive="formStructure.isActiveQuestion(sectionIndex, index)"
              @deleteQuestion="formStructure.deleteQuestion(sectionIndex, index)"
            />
            <!-- Question Content -->
            <Expandable :when="formStructure.isActiveQuestion(sectionIndex, index)" >
            ........
            </Expandable>
          </Draggable>
        </Container>

I tried targeting .dndrag-ghost element directly, but that also didn't make a difference

Please Help

[wasimTQ]

@bhaviljain68 There's a event named @drag-enter. This event detects the updated dom once the dragging ghost is in place.

You can use that to select the .dndrag-ghost directly using querySelector. And manipulate using dom manipulation. That's how I did in my project.

[katebushka]

If you need a background under the dragged element use property in Container :drop-placeholder | boolean,object | undefined | Options for drop placeholder. className, animationDuration, showOnTop This is in example https://amendx.github.io/vue-dndrop/examples/cards.html