vuedraggable入门demo及属性方法学习

前言

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。拖顶的数据和data里的数据为双向绑定 ，在界面变的时候data中的数据也在跟着变化，插件的GitHub介绍地址
vuedraggable参数详解

安装

 yarn add vuedraggable
 npm i -S vuedraggable

引入

import draggable from 'vuedraggable'

使用

<template>
  <div class="main">
    排序
    <div>
      <draggable
        v-model="groups"
        @chang="change"
        @start="start"
        @end="end"
        :move="move"
      >
        <!-- <transition-group> -->
        <div v-for="(item, index) in groups" :key="index">item {{ item }}</div>
        <!-- </transition-group> -->
      </draggable>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "HelloWorld",
  components: {
    draggable,
  },
  data() {
    return {
      groups: [1, 2, 3, 4, 5],
    };
  },
  methods: {
    change(event) {
      console.log("change", event);
    },
    start(event) {
      console.log("start", event);
    },
    end(event) {
      console.log("end", event, this.groups);
    },
    move(event, orgin) {
      console.log("move", event, orgin);
    },
  },
};
</script>

常用配置参数

group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
  sort: true,  // 内部排序列表
  delay: 0, // 以毫秒为单位定义排序何时开始。
  touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
  disabled: false, // 如果设置为真，则禁用sortable。
  store: null,  // @see Store
  animation: 150,  // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
  handle: ".my-handle",  // 在列表项中拖动句柄选择器。
  filter: ".ignore-elements",  // 不导致拖拽的选择器(字符串或函数)
  preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
  draggable: ".item",  // 指定元素中的哪些项应该是可拖动的。
  ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。
  chosenClass: "sortable-chosen",  // 设置被选中的元素的class
  dragClass: "sortable-drag",  //拖动元素的class。
  dataIdAttr: 'data-id',

  forceFallback: false,  // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响）
  fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名。
  fallbackOnBody: false,  // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级）
  fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。

  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

事件

//evt里面有两个值，一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
    change: function (evt) {
      console.log(evt)
    },
    //start ,end ,add,update, sort, remove 得到的都差不多
    start: function (evt) {
      console.log(evt)
    },
    end: function (evt) {
      console.log(evt)
      evt.item //可以知道拖动的本身
      evt.to    // 可以知道拖动的目标列表
      evt.from  // 可以知道之前的列表
      evt.oldIndex  // 可以知道拖动前的位置
      evt.newIndex  // 可以知道拖动后的位置
    },
    move: function (evt, originalEvent) {
      console.log(evt)
      console.log(originalEvent) //鼠标位置
    }

在来个完整的,带动画拖拽的例子,想知道效果如何,请自己cv下来运行就行啦,动态的图不太会搞

<template>
  <div class="container">
    <h3>Draggable</h3>

    <draggable tag="ul"
               :list="list"
               v-bind="dragOptions"
               class="list-group"
               handle=".handle" 
               @start="drag = true"
               @end="drag = false">
      <transition-group type="transition"
                        :name="!drag ? 'flip-list' : null">
        <li class="list-group-item"
            v-for="(element, idx) in list"
            :key="element.name">
          <span class="handle">拖</span>
          <span class="text">{{ element.name }} </span>
          <span class="close"
                @click="removeAt(idx)">删</span>
        </li>
      </transition-group>
    </draggable>

    <a-button type="danger" class="btn btn-secondary button"
            @click="add">新增</a-button>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "draggable-template",
  components: {
    draggable
  },
  data () {
    return {
      list: [
        { name: "John0", text: "", id: 0 },
        { name: "Joao1", text: "", id: 1 },
        { name: "Jean2", text: "", id: 2 },
        { name: "Jean3", text: "", id: 3 },
        { name: "Jean4", text: "", id: 4 }
      ],
      drag: false
    };
  },
  computed: {
    dragOptions () {
      return {
        animation: 200, // 动画时间
        disabled: false, // false可拖拽，true不可拖拽
        group: "description",
        ghostClass: "ghost"
      };
    }
  },
  methods: {
    removeAt (idx) {
      this.list.splice(idx, 1);
    },
    add () {
      let i = this.list.length
      this.list.push({ name: "Juan " + i, id: i, text: "" });
    }
  }
};
</script>
<style lang="scss" scoped>
  // .flip-list-move {
  //   transition: transform 0.5s;
  // }
  // .no-move {
  //   transition: transform 0s;
  // }

.container {
  width: 100%;
  text-align: center;
  .handle {
    cursor: move;
  }
  .list-group {
    margin-bottom: 50px;
    .list-group-item {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      border: 1px solid #ccc;
      height: 40px;
      line-height: 40px;
      width: 300px;
      text-align: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
    }
  }
}
</style>