Vue Slicksort

Appearance

Return to top
On this page

Basic Use

This is a basic example of a sortable list. v-model:list allows data-binding between the list of fruits.

vue
<template>
  <SlickList axis="y" v-model:list="fruits">
    <SlickItem v-for="(fruit, i) in fruits" :key="fruit" :index="i">
      {{ fruit }}
    </SlickItem>
  </SlickList>
</template>

<script>
import { SlickList, SlickItem } from 'vue-slicksort';

export default {
  components: {
    SlickList,
    SlickItem,
  },
  data() {
    return {
      fruits: ['Apples', 'Bananas' /* etc. */],
    };
  },
};
</script>

Try it out!

  • Apples
  • Bananas
  • Cherries
  • Dragon Fruit
  • Elderberries
v-model
fruits: [
  "Apples",
  "Bananas",
  "Cherries",
  "Dragon Fruit",
  "Elderberries"
]

TIP

:key should refer to unique data, like an ID attribute, that can be used to track the item as it moves. Using the index (i) as the key is not advised and may cause unwanted rendering effects.

Slot Shorthand

If you want build sortable lists quickly, use the item scoped slot in the SlickList component. This slot will repeat for each item in the list prop. This has to be used with v-model:list or the :list prop on the container.

vue
<template>
  <SlickList axis="y" v-model:list="list">
    <!-- Repeated for everything in 'list' -->
    <template #item="{ item }">
      {{ item }}
    </template>
  </SlickList>
</template>
Apples
Bananas
Cherries
Dragon Fruit
Elderberries
v-model
fruits: [
  "Apples",
  "Bananas",
  "Cherries",
  "Dragon Fruit",
  "Elderberries"
]

Horizontal List

If your lists are layed out along the X axis, pass in the axis="x" prop and it will just work! You will have to handle the actual CSS of making them horizontal, display: flex should do the trick.

html
<SlickList axis="x" v-model:list="fruits">
  <!-- ... -->
</SlickList>
  • Apples
  • Bananas
  • Cherries
  • Dragon Fruit
  • Elderberries
v-model
fruits: [
  "Apples",
  "Bananas",
  "Cherries",
  "Dragon Fruit",
  "Elderberries"
]

Using a drag handle

By default the entire list item is the handle for the drag events. This might be a problem if you have inputs or buttons or other interactive elements within the items. You can use the drag handle mixin to make any element a handle.

html
<SlickList axis="y" v-model:list="fruits" useDragHandle>
  <SlickItem v-for="(fruit, i) in fruits" :key="fruit" :index="i">
    <DragHandle>
      <Icon name="hamburger" />
    </DragHandle>
    {{ fruit }}
  </SlickItem>
</SlickList>
  • Apples
  • Bananas
  • Cherries
  • Dragon Fruit
  • Elderberries
v-model
fruits: [
  "Apples",
  "Bananas",
  "Cherries",
  "Dragon Fruit",
  "Elderberries"
]

Autoscroll

Slicksort will automatically autoscroll within the container if it overflows.

vue
<template>
  <div>
    <SlickList v-model:list="items" axis="y" class="long-list">
      <SlickItem v-for="(item, index) in items" :key="item" :index="index" :item="item">
        {{ item }}
      </SlickItem>
    </SlickList>
  </div>
</template>

<script>
import { range, random } from 'lodash-es';
import { SlickList, SlickItem } from 'vue-slicksort';

export default {
  components: {
    SlickItem,
    SlickList,
  },
  data() {
    return {
      items: range(100).map((i) => `Item ${i}`),
    };
  },
};
</script>

<style scoped>
.long-list {
  max-height: 300px;
  overflow: auto;
}
</style>
  • Item 0
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
  • Item 21
  • Item 22
  • Item 23
  • Item 24
  • Item 25
  • Item 26
  • Item 27
  • Item 28
  • Item 29
  • Item 30
  • Item 31
  • Item 32
  • Item 33
  • Item 34
  • Item 35
  • Item 36
  • Item 37
  • Item 38
  • Item 39
  • Item 40
  • Item 41
  • Item 42
  • Item 43
  • Item 44
  • Item 45
  • Item 46
  • Item 47
  • Item 48
  • Item 49
  • Item 50
  • Item 51
  • Item 52
  • Item 53
  • Item 54
  • Item 55
  • Item 56
  • Item 57
  • Item 58
  • Item 59
  • Item 60
  • Item 61
  • Item 62
  • Item 63
  • Item 64
  • Item 65
  • Item 66
  • Item 67
  • Item 68
  • Item 69
  • Item 70
  • Item 71
  • Item 72
  • Item 73
  • Item 74
  • Item 75
  • Item 76
  • Item 77
  • Item 78
  • Item 79
  • Item 80
  • Item 81
  • Item 82
  • Item 83
  • Item 84
  • Item 85
  • Item 86
  • Item 87
  • Item 88
  • Item 89
  • Item 90
  • Item 91
  • Item 92
  • Item 93
  • Item 94
  • Item 95
  • Item 96
  • Item 97
  • Item 98
  • Item 99