Standalone Slicksort component

[Jexordexan]

This could behave similarly to the <draggable> component in vuedraggable Where there is one component with a slot for it's children, which have been iterated using v-for.

[eyy]

Another option is to export two components, matching the two mixins. That's what I'm using:

import { ContainerMixin, ElementMixin } from 'vue-slicksort'

const SortableList = {
  mixins: [ ContainerMixin ],
  template: '<div><slot /></div>'
}

const SortableItem = {
  mixins: [ ElementMixin ],
  template: '<div><slot /></div>'
}

[ghost]

@eyy how do you pass options. For example useDragHandle="true".

[eyy]

It's a mixin, the options are passed automatically:

<sortable-list
      v-model="here"
      lockAxis="y"
      :useDragHandle="true"
    >
      <sortable-item
        v-for="(doc, index) in here"
        :index="index"
        :key="doc._id"
        class="box"
      >
// etc.

[ghost]

@eyy Thank you. These should be on docs.

[ghost]

@eyy BTW. The correct usage should be :use-drag-handle="true"

[eyy]

Perhaps these minimal components can be included in the library?

[Jexordexan]

My hesitation about including those is that at some point I want a singular component to do everything kind of like vue-draggable. I dont want people to be confused about which component to use, and when.

[eyy]

I think it's clearer that there are two components; The right naming, and a simple example in the README file, can go a long way.

[Jexordexan]

Hmm, okay! Thanks for your input :) I guess two components isn't terrible and it doesn't require much more code. If you could make a PR and prioritize render functions, that'd be great!

[eyy]

:) Will do. What do you mean by prioritize render functions?

[Jexordexan]

Don't use the template string as it is not compatible with the runtime version of vue. Better to use a render function instead!

More info: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only