Skip to content

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.

<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