How to remove white background for chosen item?

[seriiserii825]

Hi, thanks for greate lib.

I tried to remove white background for chosen or dragging item with overflow hidden, but doesn't work.

https://assets.digitalocean.com/articles/alligator/boo.svg

And the code

<script setup lang="ts">
import draggable from 'vuedraggable';
import { ref } from 'vue';

const message = [
  'vue.draggable',
  'draggable',
  'component',
  'for',
  'vue.js 2.0',
  'based',
  'on',
  'Sortablejs',
];

const list = ref(
  message.map((name, index) => {
    return { name, order: index + 1 };
  })
);

const dragOptions = ref({
  animation: 200,
  group: 'description',
  disabled: false,
  ghostClass: 'ghost',
});

const drag = ref(false);

const sort = () => {
  console.log('here');
  list.value = list.value.sort((a, b) => a.order - b.order);
};
</script>

<template>
  <div class="row">
    <div class="col-2">
      <button class="btn btn-secondary button" @click="sort">
        To original order
      </button>
    </div>

    <div class="col-6">
      <h3>Transition</h3>
      <transition-group>
        <draggable
          item-key="name"
          key="dragggable"
          :list="list"
          v-bind="dragOptions"
          @start="drag = true"
          @end="drag = false"
        >
          <template #item="{ element }">
              <li :key="element.name">
                {{ element.name }}
              </li>
          </template>
        </draggable>
      </transition-group>
    </div>
  </div>
</template>

<style>
.button {
  margin-top: 35px;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.sortable-chosen{
  background: red;
  border-radius: 4rem;
  overflow: hidden;
}
li {
  padding: 1rem;
}
</style>

[bilyalovdenis]

Faced a similar problem. Please let me know if you managed to solve it.

[vishnug-bridge]

Use :forceFallback="true"