List with mixed styles

Example of list of elements with mixed styles

We can sort lists of elements with diferents styles:

  const list = ref([
  {
    id: "1",
    style:
      "margin: 30px 0px; border-style: solid; border-width: 0.8rem; padding: 5px;",
    content: "1",
  },
  {
    id: "2",
    style:
      "margin: 20px 0px; border-style: solid; border-width: 0.6rem; padding: 10px;",
    content: "2",
  },
  {
    id: "3",
    style:
      "margin: 10px 0px; border-style: solid; border-width: 0.4rem; padding: 15px;",
    content: "3",
  }
])

Using useDragAndDrop

You can pass for each element its styles.

Caution

Each element must have its own style before and after change its position on the list using Fluid DnD. Avoid style with psedo-classes like nth-child, nth-last-child, nth-of-type, etc because add styles to the elements of the list based in other properties like position, number of children, etc.

<template>
  <ul ref="parent" class="number-list" style="height: 280px">
    <li
      class="number"
      v-for="(element, index) in list"
      :index="index"
      :style="element.style"
    >
      {{ element.content }}
    </li>
  </ul>
</template>

Preview

This is what you got as a result:

• 1
• 2
• 3