vue项目中draggable实现拖拽排序

本文简要介绍在Vue项目中利用draggable实现拖拽排序的功能，先简单展示下具体功能。

如上图所示，点击【排序】之前list中每个item不能进行排序，当选中【排序】后可以拖拽的方式进行排序。下面就简单介绍些该功能中实现的组件和具体的代码。
draggable是一款非常实用而且功能强大的实现拖拽功能的组件，它有很多不错的公开的属性供使用者设置。想要详细了解的话，可去GitHub中draggable官网查看，这里不多赘述。

draggable引入

在windows环境下，首先打开cmd环境，cd到vue项目目录中，执行如下操作。

npm install vuedraggable

然后在vue文件中以如下方式引入

  <script>
  import Vue from 'vue';
  import draggable from 'vuedraggable'
  ...

后面就可以进行开发了，本文demo中.vue组件对应的代码如下所示。

代码展示

<template>
  <div class="div_template_list">

    <draggable class="draggable" draggable="false" :list="list2" :move="getdata" @update="datadragEnd"
               :options="{disabled:!modeSort,animation: 300,handle:'.dargDiv'}">

      <transition-group name="list-complete">
        <div v-for="element in list2" :key="element.it.name" class="list-complete-item">

          <div class="styleclass dargDiv">

            <img class="img_template_item_remove" src="../assets/ic_remove_red.png" v-if="modeRemove"/>

            <p>{{element.it.name}}</p>

            <img class="img_template_item_sort" src="../assets/logo.png" v-if="modeSort"/>

          </div>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
  import Vue from 'vue';
  import draggable from 'vuedraggable'

  require.config({
    urlArgs: "ver=1.0_0",
    paths: {
      "vue": 'vue.min2',
      "sortablejs": 'Sortable',
      "vuedraggable": 'vuedraggable'
    },
    shim: {
      'vue': {
        exports: 'vue'
      }
    }
  })

  export default {
    data(){
      return {
        modeRemove: false,
        modeSort: false,
        list2: [
          {id: "id1", it: {name: '项目合理同意审批'}},
          {id: "id2", it: {name: '项目不合理不同意审批'}},
          {id: "id3", it: {name: '项目需要修改暂缓审批'}},
          {id: "id4", it: {name: '未确认项目，需要重新确认'}},
          {id: "id5", it: {name: '项目非当前审批人审批，转相关人员'}}
        ]
      }
    },

    mounted(){

    },

    components: {
      draggable
    },

    props: [],

    computed: {},

    methods: {
      goBack(){
        this.$router.go(-1);
      },
      addTemplate(){
        console.log("加上一项")
      },
      handleChange() {
        console.log('changed');
      },
      inputChanged(value) {
        this.activeNames = value;
      },
      getdata: function (evt) {
        console.log(evt.draggedContext.element.id);
      },
      datadragEnd: function (evt) {
        console.log('拖动前的索引：' + evt.oldIndex);
        console.log('拖动后的索引：' + evt.newIndex);

      },
      getComponentData() {
        return {
          on: {
            change: this.handleChange,
            input: this.inputChanged
          },
          props: {
            value: this.activeNames
          }
        };
      }
    }
  }

</script>

<style lang="stylus" scoped>

  [v-cloak] {
    display: none;
  }

  .draggable {

    .list-complete-item {
      transition: all 1s
      height: 2.5rem
      line-height: 2.5rem
      color: black
      text-align: center
      font-size: 10pt
      vertical-align: middle
      margin-top: 0.1rem
      border-bottom: #e0e0e0 0.8px solid
      margin-left: 1rem
      margin-right: 1rem
    }

    .styleclass {
      width: 100%
      display: inline-block
      text-align: left
      height: 2.5rem
      line-height: 2.3rem
      padding-top: 0.2rem
    }

    .dargDiv {
      cursor: move
    }

    .img_template_item_remove {
      width: 1.2rem
      height: 1.2rem
      margin-top: 0.65rem
      float: left
      margin-right: 0.3rem
    }

    .img_template_item_sort {
      width: 1.2rem
      height: 1.2rem
      margin-top: 0.65rem
      vertical-align: middle
      float: right
      right: 0.5rem
    }
    p {
      display: inline-block
      height: 2.5rem
      line-height: 2.5rem
      width: 85%
      margin-left: 0.2rem
      white-space: nowrap
      text-overflow: ellipsis
      overflow: hidden
    }
  }
</style>