vuedraggable实现拖拽

安装vuedraggable

​​​​​​​cnpm i vuedraggable -S

在要使用的界面的js引入

import draggable from 'vuedraggable'
...
export default{
        components:{
            draggable,
},
...

  <draggable class="wrapper" v-model="item.icons"
             @end="dragEnd(item.icons)">
      <transition-group class="fd-icon-main">
          <div @click.stop="clickIcon(itemC,index)"
               class="fd-icon-item" :class="{'current':itemC.current === true}"
               v-for="(itemC, indexC) in item.icons" :key="itemC.id">
              <img :src="serverUrl+itemC.svgUrl"/>
              <div class="fd-describe-con">
                <div class="fd-icon-name" :title="itemC.name">{{itemC.name}}</div>
                <div class="fd-icon-describe" :title="itemC.describe">{{itemC.describe}}</div>
                  <aty-poptip popper-class="fd-more-pop" placement="bottom" trigger="hover">
                      <div class="fd-more" @click.stop="clickIcon(itemC,index)"></div>
                      <div slot="content">
                          <p @click.stop="editIcon(item,index,itemC,indexC)">编辑</p>
                          <p @click.stop="changeGroup(item,index,itemC,indexC)">更换分组</p>
                          <p @click.stop="removeIcon(item,index,itemC,indexC)">删除</p>
                          <p @click.stop="downloadSvg(itemC)">下载svg</p>
                          <p @click.stop="downloadPng(itemC)">下载png</p>
                      </div>
                  </aty-poptip>
              </div>
          </div>
      </transition-group>
  </draggable>

dragEnd(item) {
            const _this = this;
            item.forEach((item, index) => {
                item.iconOrder = index;
            });
            const options = {
                url: `${window.fdConfig.url.xmgl.dragIcon}`,
                data:item,
                method: window.fdConfig.methodPost
            };
            _this.requestDragIcon(options)
                .then((data) => {
                    _this.getIconList(_this.id);
                });
        }

实现图标拖拽切换顺序