vue拖拽排序插件vuedraggable使用方法详解

大家好，最近做的项目要用到拖拽排序，我现在的项目是vue项目，所以我就屁颠屁颠的去百度有木有这样功能的插件，我就知道一定会有，那就是vuedraggable，这是一款很棒的拖拽插件，下面我来说一下怎么引入

首先在vue项目中，用npm包下载下来

npm install vuedraggable -s

下载下来后，引入插件，在你的vue文件的script标签里面这样引入

import draggable from 'vuedraggable'

别忘了下面要注册组件

components: {
  draggable
},

然后就可以在template标签里面使用了

<draggable v-model="colors" @update="datadragend" :options = "{animation:500}">
      <transition-group>
        <div v-for="element in colors" :key="element.text" class = "drag-item">
          {{element.text}}
        </div>
      </transition-group>
 </draggable>

下面贴一下详细用法

<template>
  <draggable v-model="colors" @update="datadragend" :options = "{animation:500}">
      <transition-group>
        <div v-for="element in colors" :key="element.text" class = "drag-item">
          {{element.text}}
        </div>
      </transition-group>
  </draggable>
</template>

<script>
  import draggable from 'vuedraggable'
  export default{
    data(){
      return{
        msg:"这是测试组件",
        colors: [
          {
            text: "aquamarine",
          }, 
          {
            text: "hotpink",
          }, 
          {
            text: "gold",
          }, 
          {
            text: "crimson",
          }, 
          {
            text: "blueviolet",
          },
          {
            text: "lightblue",
          }, 
          {
            text: "cornflowerblue",
          }, 
          {
            text: "skyblue",
          }, 
          {
            text: "burlywood",
          }
        ],
        startarr:[],
        endarr:[],
        count:0,
      }
    },
    components: {
    　　draggable
    },
    methods:{
      getdata (evt) {
        console.log(evt.draggedcontext.element.text)
      },
      datadragend (evt) {
        evt.preventdefault();
        console.log('拖动前的索引 :' + evt.oldindex)
        console.log('拖动后的索引 :' + evt.newindex)
        console.log(this.colors);
      }
    },
    mounted () {
      //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
      document.body.ondrop = function (event) {
        event.preventdefault();
        event.stoppropagation();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .test{
    border:1px solid #ccc;
  }
  .drag-item{
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin: auto;
    position: relative;
    background: #ddd;
    margin-top:20px;
  }
  .ghostclass{
    opacity: 1;
  }
  .bottom{
    width: 200px;
    height: 50px;
    position: relative;
    background: blue;
    top:2px;
    left: 2px;
    transition: all .5s linear;
  }
</style>

下面是结果

上下是可以拖动的，只是截图的话看不出效果来，小伙伴们注意了，里面有个options选项，这个选项怎么来的呢，据我观察这个插件是基于sortable.js，所以这个options里面的配置，和sortable.js是一样的，下面我贴两个地址，一个是vuedraggable的github地址，一个是sortable.js的github地址

vuedraggable: 学习地址 

sortable.js:学习地址

options配置如下

var sortable = new sortable(el, {
  group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
  sort: true, // sorting inside list
  delay: 0, // time in milliseconds to define when the sorting should start
  touchstartthreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
  disabled: false, // disables the sortable if set to true.
  store: null, // @see store
  animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
  handle: ".my-handle", // drag handle selector within list items
  filter: ".ignore-elements", // selectors that do not lead to dragging (string or function)
  preventonfilter: true, // call `event.preventdefault()` when triggered `filter`
  draggable: ".item", // specifies which items inside the element should be draggable
  ghostclass: "sortable-ghost", // class name for the drop placeholder
  chosenclass: "sortable-chosen", // class name for the chosen item
  dragclass: "sortable-drag", // class name for the dragging item
  dataidattr: 'data-id',

  forcefallback: false, // ignore the html5 dnd behaviour and force the fallback to kick in

  fallbackclass: "sortable-fallback", // class name for the cloned dom element when using forcefallback
  fallbackonbody: false, // appends the cloned dom element into the document's body
  fallbacktolerance: 0, // specify in pixels how far the mouse should move before it's considered as a drag.

  scroll: true, // or htmlelement
  scrollfn: function(offsetx, offsety, originalevent, touchevt, hovertargetel) { ... }, // if you have custom scrollbar scrollfn may be used for autoscrolling
  scrollsensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  scrollspeed: 10, // px

  setdata: function (/** datatransfer */datatransfer, /** htmlelement*/dragel) {
    datatransfer.setdata('text', dragel.textcontent); // `datatransfer` object of html5 dragevent
  },

  // element is chosen
  onchoose: function (/**event*/evt) {
    evt.oldindex; // element index within parent
  },

  // element dragging started
  onstart: function (/**event*/evt) {
    evt.oldindex; // element index within parent
  },

  // element dragging ended
  onend: function (/**event*/evt) {
    var itemel = evt.item; // dragged htmlelement
    evt.to;  // target list
    evt.from; // previous list
    evt.oldindex; // element's old index within old parent
    evt.newindex; // element's new index within new parent
  },

  // element is dropped into the list from another list
  onadd: function (/**event*/evt) {
    // same properties as onend
  },

  // changed sorting within list
  onupdate: function (/**event*/evt) {
    // same properties as onend
  },

  // called by any change to the list (add / update / remove)
  onsort: function (/**event*/evt) {
    // same properties as onend
  },

  // element is removed from the list into another list
  onremove: function (/**event*/evt) {
    // same properties as onend
  },

  // attempt to drag a filtered element
  onfilter: function (/**event*/evt) {
    var itemel = evt.item; // htmlelement receiving the `mousedown|tapstart` event.
  },

  // event when you move an item in the list or between lists
  onmove: function (/**event*/evt, /**event*/originalevent) {
    // example: http://jsbin.com/tuyafe/1/edit?js,output
    evt.dragged; // dragged htmlelement
    evt.draggedrect; // textrectangle {left, top, right и bottom}
    evt.related; // htmlelement on which have guided
    evt.relatedrect; // textrectangle
    originalevent.clienty; // mouse position
    // return false; — for cancel
  },

  // called when creating a clone of element
  onclone: function (/**event*/evt) {
    var origel = evt.item;
    var cloneel = evt.clone;
  }
});

好了，今天的介绍就到这里啦，快去试试吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。