vue使用vuedraggable插件实现拖拽效果_Vue.js

技术：
ant design vue1.7.8 的ui框架、
vue2.x版本

场景：需要实现div拖拽的效果

效果图：

第一步：安装vuedraggable插件

//npm方式安装
npm i -s vuedraggable
//或使用yarn安装
yarn add vuedraggable

第二步:在页面引入组件 script代码块里

<script>
//第一步 ***.引入组件
import draggable from 'vuedraggable'
export default {
  components: {
    draggable, //***.第二步 
  },
  data() {
    return {
      tagslist: [],
      treeclass: '',
      classlist: [],
      checkedcategorykeys: [],
      categorytree: [],
      defaultprops: {
        children: 'subgrouplist',
        title: 'groupname',
        key: 'groupcode',
      },
      eventselectednode: null,
      isloading: false,
    }
  },
  created() {
    this.load_init()
  },
  methods: {
    //拖拽动作   ***.第三步 拖拽完成事件
    ondraggableupdate(e) {
      this.isloading = true
      settimeout(() => {
        this.isloading = false
        //老位置
        const oldindex = e.oldindex
        //新位置
        const newindex = e.newindex
        const newsort = this.tagslist[e.newindex].sort
        this.tagslist[e.newindex].sort = this.tagslist[e.oldindex].sort
        this.tagslist[e.oldindex].sort = newsort
        console.log(this.tagslist)
        this.$message.success('顺序变更成功!')
      }, 1000)
    },
    //初始化
    load_init() {
      for (let index = 0; index < 98; index++) {
        this.classlist.push({
          value: 'val' + index,
          label: '树层级_' + index,
        })
        this.tagslist.push({
          value: 'val' + index,
          label: '树层级_' + index,
          //是否编辑
          iseditname: false,
          //排序
          sort: index,
          //loading
          isloading: false,
        })
      }
    },
  },
}
</script>

template代码块

      <div class="bodyright">
        <div class="bodyrighttitle">
          <div><span>标签池</span></div>
          <div><a-button type="primary">导入excel</a-button></div>
        </div>
        <div class="bodyrightlabel">
          <a-spin :spinning="isloading">
          <!-- ***.下面是第四步 -->
            <draggable
              v-model="tagslist"
              class="bodyrightdraggable"
              @sort="ondraggableupdate"
              animation="300"
              chosenclass="chosen"
            >
              <transition-group v-for="item in tagslist" :key="item.value">
                <a-tag
                  class="tabs"
                  :key="item.value"
                  @close="deletetag(item)"
                  style="margin-bottom: 5px"
                  @dblclick="handledblclick(item)"
                >
                  <span class="a-select__tags-text tagname" v-if="!item.iseditname">
                    <cellipsis :length="8" :tooltip="true">
                      {{ item.label }}
                    </cellipsis>
                    <div title="删除"><a-icon type="close" @click.stop="removelabel(item)" /></div>
                  </span>
                  <a-input
                    v-else
                    :ref="'input_' + item.value"
                    v-model="item.label"
                    :maxlength="22"
                    @pressenter="sumbitlabel(item)"
                    placeholder="请输入标签名称"
                    @blur="sumbitlabel(item)"
                  ></a-input>
                </a-tag>
              </transition-group>
            </draggable>
          </a-spin>
        </div>
      </div>

style代码块

    .bodyright {
      width: 65%;
      height: 100%;
      .bodyrighttitle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        line-height: 18px;
      }
      .bodyrightlabel {
        width: 100%;
        height: 90%;
        overflow-y: auto;
        border: 2px solid #d9d9d9;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        .bodyrightdraggable {
          display: flex;
          flex-wrap: wrap;
          padding: 10px;
        }
        .tabs {
          width: 125px;
          height: 35px;
          border: 1px dashed #ccc;
          border-radius: 25px;
          font-size: 16px;
          align-items: center;
          display: flex;
          cursor: pointer;
          .tagname {
            width: 100%;
            display: flex;
            justify-content: space-between;
          }
          i {
            display: none;
          }
          &:hover {
            i {
              font-size: 16px;
              color: red;
              display: inline-block;
            }
          }
        }
        //***.第五步 样式
        .chosen {
          .tabs {
            border: 1px solid #1890ff;
            background-color: #fff !important;
            color: #1890ff;
            cursor: move;
          }
        }
      }
    }