vue.draggable.next

vue.draggable.next is a Vue 3 component that provides drag-and-drop functionality while keeping the HTML and your view model list in sync.

Key features include:

• Full support for Sortable.js features (touch support, drag handles, auto-scrolling, and cross-list dragging).
• No jQuery dependency.
• Compatibility with Vue.js 3.0 transition-group.
• Cancellation support and event reporting for full control.
• Ability to make existing UI library components (like Vuetify, Element, or Vue Material) draggable using the tag and componentData props.

You can initialize the sortable object by passing a configuration object to the options prop.

Warning: This approach is deprecated. It is recommended to use Sortable options as props directly or via the component's event API instead.

Note that any option starting with on (e.g., onEnd, onStart) will be ignored because the draggable component exposes these functionalities through standard Vue events instead.

For Vue.js 1.0, use the v-dragable-for directive exactly like a v-for directive. You can pass Sortable.js configuration by providing an options parameter, which can be either a JSON string or a full JavaScript object.

<div v-dragable-for="element in list1" options='{"group":"people"}'>
  <p>{{element.name}}</p>
</div>

The element prop is deprecated in favor of the tag prop to comply with widespread conventions. When defining the HTML element type for the draggable component, use tag instead of element.

<!-- Before -->
<draggable v-for="list" element="ul">
    <!-- -->
</draggable>

<!-- After -->
<draggable v-for="list" tag="ul">
  <!-- -->
</draggable>

The options prop was deprecated in version v2.20. Vue.draggable now uses a transparent wrapper, allowing Sortable options to be passed directly as props to the draggable component.

• For single options, pass them as individual props.
• For multiple options returned from a function, use v-bind.

Depending on your module system, use the following patterns to register the directive in Vue.js 1.0:

ES6 Modules:

import VueDraggable from 'vuedraggable'
import Vue from 'vue'
Vue.use(VueDraggable)

ES5 (CommonJS):

var Vue = require('vue')
Vue.use(require('vuedraggable'))

// ES6  
//For Vue.js 1.0
import VueDraggable from 'vuedraggable'
import Vue from 'vue'
Vue.use(VueDraggable)

// ES5 
//For Vue.js 1.0
var Vue = require('vue')
Vue.use(require('vuedraggable'))

To use vue.draggable.next in your Vue 3 project, install the @next version using your preferred package manager.

yarn add vuedraggable@next

npm i -S vuedraggable@next

You can install vuedraggable using npm or Bower. Note that version 1.0.9 is the version compatible with Vue.js 1.0.

npm install vuedraggable

When upgrading from the Vue 2 version of vuedraggable, note these breaking changes:

1. Slots: Use the #item slot instead of the default slot to display elements.
2. Keys: Provide a key for items using the item-key prop.
3. Transitions: Use the tag prop and component-data prop to create transitions instead of wrapping the component in a <transition-group>.

Example Migration (Transitions):

From (Vue 2):

<draggable v-model="myArray">
    <transition-group name="fade">
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

To (Vue 3):

<draggable v-model="myArray" tag="transition-group" :component-data="{name:'fade'}" item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>
  </template>
</draggable>

If you are not using a package manager, you can include vue.draggable.next via direct script links. Ensure you include Vue 3 and Sortable.js as dependencies first.

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js"></script>

To use vuedraggable, register the component and use the v-model directive to bind your array. You must use the #item slot to render list elements and provide an item-key prop to identify unique elements.

Slot props available in #item:

• element: The element in the list.
• index: The element index.

<draggable 
  v-model="myArray" 
  group="people" 
  @start="drag=true" 
  @end="drag=false" 
  item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>
  </template>
</draggable>

import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
  },
  data() {
    return {
      myArray: [{ id: 1, name: 'John' }],
      drag: false,
    }
  }
}