DOCSEARCHbyAlgolia
Submit Docs

Vue.Draggable

repository·master·Indexed 12 days ago

https://github.com/sortablejs/vue.draggable

A draggable component for Vue 2.0 (version 2.24.3) built on top of Sortable.js. It enables drag-and-drop functionality while keeping a view model array in sync with the DOM, supporting touch devices, drag handles, and integration with Vuex and transition-group.

Tokens
4.7K
Snippets
20
Records
25
Agent score
98%

What's inside Vue.Draggable

  1. Key features of vuedraggable

    master

    vuedraggable provides a Vue component that synchronizes a view model array with a draggable HTML list. Key features include:

    • Sortable.js Integration: Full support for touch devices, drag handles, selectable text, smart auto-scrolling, and drag-and-drop between different lists.
    • No jQuery dependency.
    • Data Synchronization: Automatically keeps the HTML list and your Vue view model list in sync.
    • Vue 2 Compatibility: Compatible with Vue.js 2.0 transition-group.
    • Customization: Supports cancellation and event reporting. You can reuse existing UI library components (like Vuetify, Element, or Vue Material) by using the tag and componentData props to make them draggable.

  2. Limitations of v-dragable-for in Vue.js 1.0

    master

    When using v-dragable-for in Vue.js 1.0, be aware of the following constraints:

    1. Data Type: The directive only works when applied to arrays, not objects.
    2. Hook Conflicts: The directive uses the Sortable.js hooks onStart, onUpdate, onAdd, and onRemove internally to update the Vue ViewModel. Consequently, you cannot use these four specific options yourself.

    Workaround for events: To react to re-ordering or collection changes, watch the underlying ViewModel collection instead of using Sortable hooks.

    watch: {
    'list1': function () {
        console.log('Collection updated!');
    }
}

  3. Migrate from `options` prop to direct props or `v-bind`

    master

    The options prop was deprecated in version v2.20. Vue.draggable now uses a transparent wrapper to pass props directly to the underlying Sortable instance.

    To migrate:

    1. For individual Sortable options, pass them as direct props to the <draggable> component.
    2. For dynamic option objects, use v-bind to spread the object onto the component.

    All Sortable options can now be attached directly to the Vue.draggable instance.

    <!-- Example 1: Single option -->
<!-- Old way -->
<draggable v-for="list" :options="{handle: '.handle'}">
</draggable>

<!-- New way -->
<draggable v-for="list" handle=".handle">
</draggable>

<!-- Example 2: Dynamic options object -->
<!-- Old way -->
<draggable v-for="list" :options="getOptions()">
</draggable>

<!-- New way -->
<draggable v-for="list" v-bind="getOptions()">
</draggable>

  4. Typical usage in Vue.js 2.0

    master

    To use the draggable component in Vue 2, import it and register it as a component. The component should wrap the elements you want to make draggable, typically using a v-for directive to iterate over an array.

    Key requirements:

    • Use v-model to bind your array.
    • Ensure children elements inside the v-for have unique :key values (avoid using array indices as keys).
    • The draggable component should directly wrap the draggable elements or a transition-group containing them.
    <template>
  <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
     <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      myArray: [
        { id: 1, name: 'Peter' },
        { id: 2, name: 'John' }
      ]
    }
  }
}
</script>

  10. Migrate from `element` prop to `tag` prop

    master

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

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

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

  11. Install vuedraggable via CDN

    master

    If you are not using a package manager, you can include vuedraggable and its dependencies via direct script links. You must include vue and Sortable.js before vuedraggable.

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