This is the 18th day of my participation in Gwen Challenge

The document is from the official document, because the official document is in English, it is difficult to read, and there is no relevant Chinese document on the Internet, so I use translation tools and refer to the relevant information for line by line translation, if there is any problem, please correct ~

For learning use only.

Github address: github.com/itmier/Vue….

Vue components (vue.js 2.0) or directives (vue.js 1.0) allow drag and drop and synchronization with viewmodel arrays.

Based on and providing all functionality of sortable.js

Applicable to Vue 3

See the vue. Draggable. Next

The sample

To browse the Demo

Sortablejs. Making. IO/Vue Draggab…

David – desmaisons. Making. IO/draggable – e…

The characteristics of

  • Fully supports sortable.js functionality
    • Support for touch devices
    • Supports drag handles and optional text.
    • Intelligent automatic rolling
    • Support drag and drop between different lists
    • No JQuery dependencies
  • Keep HTML in sync with viewmodel lists [keep HTML structure in sync with data]
  • Transition-group compatible with vue. js 2.0
  • Support for undo
  • When overall control is needed, report any changing events [Drag and drop has full event listening from the start of the drag to the end of the release of the drag, you can add your own processing]
  • Reuse existing UI component libraries such as:vuetify.element, or vue materialAnd so on, usingtagorcomponentDataProperty options so they can be dragged

supporters

Admin Dashboard Templates made with Vue, React and Angular.

donation

Did you find the project useful? Coffee: or a :beer:

The installation

Use NPM or YARN

yarn add vuedraggable

npm i -S vuedraggable
Copy the code

Note that it is vuedraggable for Vue 2.0, not vue-Draggable for Vue 1.0

linear

<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/[email protected]/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>

Copy the code

Reference example section

Vue. Js 2.0

Using the Draggable component:

Typical use:

<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>
Copy the code

The vue file:

  import draggable from 'vuedraggable'.export default {
        components: {
            draggable,
        },
  ...
Copy the code

usetransition-group:

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

The Draggable component should wrap either the Draggable element directly or the transition-group that contains the Draggable element

Use the footer slot:

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>
Copy the code

Use the header slot:

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>
Copy the code

Using Vuex:

<draggable v-model='myList'>
Copy the code
computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}
Copy the code

Receiving properties Props

value

Type: Array

Required: false

Default: null

Draggable Component input array. Usually the same as the array referenced by the inner element V-for instruction. This is the preferred way to use Vue.draggable as it is compatible with Vuex. It should not be used directly, but can be used with the V-model directive:

<draggable v-model="myArray">
Copy the code

list

Type: Array

Required: false

Default: null

Alternative to the value prop, list is an array to be synchronized with drag-and-drop.

Instead of the value property, the list is an array that can be synchronized with drag and drop

The main difference is that the list attribute is updated by the Draggable Component using the splice method, while the value is immutable.

Do not use it together with Value Prop

All sortable options

What’s new in version 2.19

As of version 2.19, Sortable options can be set directly to vue.draggable properties

This means that all sortable options are valid sortable props, with the notable exception of all methods that begin with “on”. Because the Draggable Component exposes the same API through events

Support kebab-case properties: for example, the ghostClass property will be converted to the sortable option of ghostClass.

For example, set handle,sortable, and group options:

<draggable
        v-model="list"
        handle=".handle"
        :group="{ name: 'people', pull: 'clone', put: false }"
        ghost-class="ghost"
        :sort="false"
        @change="log"
      >
      <! -- -->
</draggable>
Copy the code

tag

Type: String

Default: 'div'

Draggable Component is the type of HTML node created as an external element containing slot

It is also possible to pass the name of the Vue component as an element, in which case the draggable attribute will be passed to the creating component

If you need to set up props or events for the component you are creating, see componentData

clone

Type: Function Required: false Default: (original) => { return original; }

When the Clone option is true, a function is called on the source component to clone elements. The only argument is the viewModel element to clone, and the return value is its clone version.

By default, vue.draggable reuses viewModel elements, so if you want to clone or deep clone it, you must use this hook.

move

Type: Function

Required: false

Default: null

If not null this function will be called in a similar way as Sortable onMove callback.

If not null, this function is called like Sortable onMove callback.

Returning false cancels the drag operation.

function onMoveCallback(evt, originalEvent){...// return false; - for the cancel
}
Copy the code

The EVT object has three of the same properties as Sortable onMove Event and three additional properties:

  • draggedContext: The context associated with the dragged element
    • index: Index of the element being dragged
    • element[Dragged element] : Dragged element dregs view model element
    • futureIndex: The potential index value of the dragged element if the drop operation is accepted
  • relatedContext: The context associated with the current drag operation
    • index: Index of the target element
    • element: Viewmodel element for the target element [target element data]
    • list: List of targets
    • component: target VueComponent [Vue component target??]

HTML:

<draggable :list="list" :move="checkMove">
Copy the code

javascript:

checkMove: function(evt){
    return(evt.draggedContext.element.name! = ='apple');
}
Copy the code

See the full demo: cancer.html, cancer.js

componentData

Type: Object

Required: false

Default: null

The prop property is used to pass additional information to the child components declared by tag props:

  • props: props passed to the child component
  • attrs: Attrs passed to the child component
  • on: Events to subscribe to in child components

Example using element UI Library:

<draggable tag="el-collapse" :list="list" :component-data="getComponentData()">
    <el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
        <div>{{e.description}}</div>
     </el-collapse-item>
</draggable>
Copy the code
methods: {
    handleChange() {
      console.log('changed');
    },
    inputChanged(value) {
      this.activeNames = value;
    },
    getComponentData() {
      return {
        on: {
          change: this.handleChange,
          input: this.inputChanged
        },
        attrs: {wrap: true
        },
        props: {
          value: this.activeNames } }; }}Copy the code

Events

  • Support Sortable events:

    start, add, remove, update, end, choose, unchoose, sort, filter, clone

    These events are called when sortable.js triggers onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone with the same arguments.

    Read here for your reference

    Note that SortableJS OnMove callback is mapped with the move prop

    Note: The OnMove callback of SortableJS is mapped by Move Prop.

HTML:

<draggable :list="list" @end="onEnd">
Copy the code

  • change event

    change event is triggered when list prop is not null and the corresponding array is altered due to drag-and-drop operation.

    The change event is emitted when the list attribute is not null and the corresponding array is changed due to a drag-and-drop operation.

    This event is called with one argument containing one of the following properties:

    You can invoke an event with a parameter containing one of the following properties:

    • added: contains information about elements added to the array
      • newIndex: Index of the element to be added
      • element: Added element
    • removed: contains information about the element removed from the array
      • oldIndex: Removes the index of the previous element
      • element: Removed element
    • moved: Contains information about the elements moved in the array
      • newIndex: Current index of the element to be moved
      • oldIndex: The old index of the element to be moved
      • element: The element to be moved

Slots

Limitation: Neither header slot nor footer slot can be used with transition-group

Header

Use header slot to add none-Draggable elements to the vueDraggable component

Important: It should be used with the Draggable option to mark the draggable element

Note: Header slot is inserted before the default slot no matter where it is in the template. Ex:

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>
Copy the code

Footer

Use footer Slot to add none-Draggable elements to the vueDraggable component

Important: It should be used with the Draggable option to mark draggable elements. Note that footer slot is inserted after the default slot no matter where it is in the template. Ex:

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>
Copy the code

Gotchas

  • Vue.draggable children should use the V-for directive to map list or value attributes
    • You can use headers or footer slots to get around this limitation
  • Child elements in V-for should be tagged like any element in vue.js. The special care is to provide meaningful key values
    • It is generally not possible to provide an array index value as a key value, since the key should be associated with the Items Content
    • cloned elements should provide updated keys, it is doable using the clone props for example
    • Cloned elements should provide updated keys, as is possible with Clone props.

Example

  • Clone
  • Handle
  • Transition
  • Nested
  • Table

Full demo example

draggable-example

For the Vue. Js 1.0

See here