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

npm install vuedraggable -S

import draggable from 'vuedraggable'

components: {  draggable},

<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>

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;  }});