vue-slicksort a vue.js drag component

This article mainly shares with you vue-slicksort, which is a powerful draggable vue.js component. It can automatically scroll and lock the coordinate system. Supports smooth animation effects when dragging. Can support horizontal, vertical or grid dragging. Supports touch. Hope this article can help everyone.

DEMO

Install

Install via npm

$ npm install vue-slicksort --save

Install via yarn

$ yarn add vue-slicksort

Plug-in application

Introduction of components

// Using an ES6 transpiler like Babel
import {ContainerMixin, ElementMixin} from 'vue-slicksort';

// Not using an ES6 transpiler
var slicksort = require('vue-slicksort');
var ContainerMixin = slicksort.ContainerMixin;
var ElementMixin = slicksort.ElementMixin;

Reference like this in your vue file

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

const SortableList = {
  mixins: [ContainerMixin],
  template: `
    <ul class="list">
      <slot />
    </ul>
  `,
};

const SortableItem = {
  mixins: [ElementMixin],
  props: ['item'],
  template: `
    <li class="list-item">{{item}}</li>
  `,
};

const ExampleVue = {
  name: 'Example',
  template: `
    <p class="root">
      <SortableList lockAxis="y" v-model="items">
        <SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item"/>
      </SortableList>
    </p>
  `,
  components: {
    SortableItem,
    SortableList,
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'],
    };
  },
};

const app = new Vue({
  el: '#root',
  render: (h) => h(ExampleVue),
});

Component parameters

##valueArray-Contents of the listaxisStringyList elements can be dragged horizontally, vertically or grid dragged. Represented by x, y, xy. lockAxisString-Used to lock the movement of elements in the coordinate system when sortinghelperClassString-helper’s custom style classtransitionDurationNumber300The duration of the element movement animationpressDelayNumber0 If you need to allow dragging when the element is pressed for a period of time, you can set this attributepressThresholdNumber 5The threshold at which movement is allowed to be ignored, in pixelsdistanceNumber0 If you need to drag a certain distance before being recognized as the dragging element, you can set this attributeuseDragHandleBooleanfalse If using HandleDirective, set to trueuseWindowAsScrollContainerBooleanfalseWhether to set the window to Scrollable containerhideSortableGhostBooleanfalseWhether to set the window as a scrollable containeruseWindowAsScrollContainerBooleantrueWhether to automatically hide ghost elementslockToContainerEdgesBooleanfalseWhether to lock the edge of the container for the element being draggedlockOffsetString50%The offset to lock the edge of the container for the element being draggedshouldCancelStartFunction- This method will be called before dragging startsgetHelperDimensionsFunction-Can Select method ({node, index, collection}), used to return the calculated size of SortableHelper

Property	Type	Default	Description

Wheel Factory - a website that shares excellent components of vue and angular.

Related recommendations:

Learning to use JS drag and drop components_javascript skills

# #

The above is the detailed content of vue-slicksort a vue.js drag component. For more information, please follow other related articles on the PHP Chinese website!