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>

< >
  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.  = function (event) {
        event.preventDefault();
        event.stopPropagation();
      }
    }
  }
</ >

<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`   of HTML5 DragEvent
  },

  // Element is chosen
  onChoose: function (/**Event*/evt) {
    evt.oldIndex; // element index within parent
  },

  // Element dragging started
   : 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
   : 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;
  }
});