【VUE】前端vuedraggable实现拖拽功能，以及vuedraggable和awe-dnd区别

>因为要做一个拖拽排序的功能，便了解下拖拽框架的使用，网上一搜就可以看到有[vuedraggable](https://www.npmjs.com/package/vuedraggable)和 [awe-dnd](https://github.com/hilongjw/vue-dragging)。这两个是一个东西，不同的是，两个库的里面不同，一个是直接进行组件封装，一个是进行指令封装。

于是便同时安装了两个插件，看下区别
----
- 从上图可以看出来，其实vuedraggable动画效果更好点，再其次vuedraggable的文档更多点，而且github上有一些用法的代码

- 这个两个文档都很少，一些用法要自己去找研究，不太友好，唯一庆幸的是vuedraggable有例子

一开始看文档把代码粘贴上去，并没有上图的拖拽动画效果，后面看例子，才知道且将可拖动元素放进了 transition-group 下面才有过渡动画, awe-dnd也是一样。

----

#####指定点击某块才能拖拽
设置handle就可以指定, 如果不想指定可以去掉，具体代码如下

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

    <button class="btn btn-secondary button"
            @click="add">新增</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>
```
----

###awe-dnd 的示例如下
```
<template>
  <div class="color-list">
    <h3>Draggable</h3>

    <transition-group type="transition"
                      :name="!drag ? 'flip-list' : null">
      <div class="color-item"
           v-for="color in colors"
           v-dragging="{ item:color,list:colors }"
           :key="color.text">{{color.text}}</div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      colors: [{
        text: "Aquamarine 1"
      }, {
        text: "Hotpink 2"
      }, {
        text: "Gold 3"
      }, {
        text: "Crimson 4"
      }, {
        text: "Blueviolet 5"
      }, {
        text: "Lightblue 6"
      }, {
        text: "Cornflowerblue 7"
      }, {
        text: "Skyblue 8"
      }, {
        text: "Burlywood 9"
      }]
    }
  },
  mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })
    this.$dragging.$on('dragend', (res) => {
      console.error(res);
    })
  }
}
</script>

<style lang="scss" scoped>
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.color-list {
  text-align: center;
  .color-item {
    cursor: move;
    border: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
    width: 200px;
    text-align: center;
  }
}
</style>
```