Vue Slicksort

Appearance

Return to top
On this page

Introduction

Slicksort exports two components for quickly creating sortable lists. These have to be used together, or with the slot shorthand.

  • SlickList For wrapping a list of items (API)
  • SlickItem For wrapping a single item and its content (API)

The functionality of these components are also available as mixins, by using the ContainerMixin and ElementMixin, you can make your own sortable components.

npm versionnpm downloadsnpm bundle size (version)license

Try it out!

List A

group: 'a'
accept: [ "b" ]
  • Item 1
  • Item 2
  • Item 3

List B

group: 'b'
accept: true
  • Item 1
  • Item 2
  • Item 3

List C

group: 'c'
accept: [ "b" ]
  • Item 1
  • Item 2
  • Item 3
v-models
lists: [
  {
    "id": 100,
    "name": "List A",
    "group": "a",
    "accept": [
      "b"
    ],
    "items": [
      {
        "value": "Item 1",
        "height": 92,
        "background": "#eb5757",
        "id": 101
      },
      {
        "value": "Item 2",
        "height": 70,
        "background": "#9b51e1",
        "id": 102
      },
      {
        "value": "Item 3",
        "height": 54,
        "background": "#58cbf2",
        "id": 103
      }
    ]
  },
  {
    "id": 104,
    "name": "List B",
    "group": "b",
    "accept": true,
    "items": [
      {
        "value": "Item 1",
        "height": 103,
        "background": "#eb5757",
        "id": 105
      },
      {
        "value": "Item 2",
        "height": 62,
        "background": "#9b51e1",
        "id": 106
      },
      {
        "value": "Item 3",
        "height": 59,
        "background": "#58cbf2",
        "id": 107
      }
    ]
  },
  {
    "id": 108,
    "name": "List C",
    "group": "c",
    "accept": [
      "b"
    ],
    "items": [
      {
        "value": "Item 1",
        "height": 84,
        "background": "#eb5757",
        "id": 109
      },
      {
        "value": "Item 2",
        "height": 67,
        "background": "#9b51e1",
        "id": 110
      },
      {
        "value": "Item 3",
        "height": 90,
        "background": "#58cbf2",
        "id": 111
      }
    ]
  }
]