vue使用SortableJS/Vue.Draggable拖动排序

npm install sortablejs --save

<template>
  <div class="noticeBoard">
      <div>
        <draggable
          class="list-group" :list="list1" group="people" @change="log">
          <transition-group tag="div" name="list-complete" >
            <div
              class="list-complete-item"
              v-for="(element, index) in list1"
              :key="element.name"
            >
              <div class="styleclass dargDiv">{{element.name}}</div>
              <div class="styleclass">{{element.name}}</div>
            </div>
          </transition-group>
        </draggable>
      </div>
      <div>
        <draggable class="list-group" :list="list2" group="people" @change="log">
          <transition-group tag="div" name="list-complete" >
            <div
              class="list-complete-item"
              v-for="(element, index) in list2"
              :key="element.name"
            >
              <div class="styleclass dargDiv">{{element.name}}</div>
              <div class="styleclass">{{element.name}}</div>
            </div>
          </transition-group>
        </draggable>
      </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  export default {
    data() {
      return {
        list1: [
          { name: "John", id: 1 },
          { name: "Joao", id: 2 },
          { name: "Jean", id: 3 },
          { name: "Gerard", id: 4 }
        ],
        list2: [
          { name: "Juan", id: 5 },
          { name: "Edgard", id: 6 },
          { name: "Johnson", id: 7 }
        ],

      }
    },
   	components: {
      draggable,
    },
    methods: {
      add: function() {
        this.list.push({ name: "Juan" });
      },
      replace: function() {
        this.list = [{ name: "Edgard" }];
      },
      clone: function(el) {
        return {
          name: el.name + " cloned"
        };
      },
      log(evt) {
        window.console.log(evt);
      },

    },
    created() {
    },
    mounted(){
      document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
      }
    },
  }
</script>

<style scoped lang="less">
  .list-complete-item {
    transition: all 1s;
    height: 50px;
    line-height: 50px;
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 24px;
    margin-top: 10px;
    display: flex;
  }

  .styleclass {
    width: 100px;
  }

  .list-complete-enter, .list-complete-leave-active {
    opacity: 0;
    height: 0px;
    margin-top: 0px;
    padding: 0px;
    border: solid 0px;
  }

  .list-complete-sortable-chosen, .list-complete-sortable-ghost {
    opacity: 0;
    height: 0px;
    margin-top: 0px;
    padding: 0px;
    border: solid 0px;
  }

  .dargDiv {
    cursor: move;
    background: red;
  }

</style>

其中的
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
是为了让火狐浏览器拖动时，不打开新标签页

这里是引用
如果不想整个块儿元素可以被点击拖动，想点击拖动单个标签，需要给该标签一个 class ，然后在 draggable 标签中 加入 handle=‘.class’ 比如handle=".dragIcon"，<button class="dragIcon"></button>

#参考地址 https://github.com/SortableJS/Vue.Draggable