vuedraggable 学习使用 生成菜单

实现效果

 安装

npm i vuedraggable

以下代码仅供参考，代码不全，所以直接复制 是用不了的 

    form: {
        // title:'',
        menu:{
          subject:{
            title:'语文老师常用',
            info:[]
          },
          class_teacher:{
            title:'班主任常用',
            info:[]
          },
        },
        tag_config:{
          tags:[]
        },
        status:0,// 0 未发布菜单 1 已发布菜单
      },

<draggable class="draggable-wrapper" group="subject" v-model="form.menu.subject.info" :sort="is_edit_type=='subject'">
    <transition-group>
                <div v-for="(item,i) in form.menu.subject.info" :key="i" class="box-menu-content-item-subject-item item-select">
                  <div class="box-menu-content-item-subject-item-div">
                    <el-image
                        style="width: 60px; height: 60px;border-radius: 50%;"
                        :src="item.icon"
                        fit="fit"></el-image>
                    <el-tooltip class="item" effect="dark" :content="item.remark" placement="bottom">
                      <span>{{item.title}}</span>
                    </el-tooltip>
                  </div>
                </div>
    </transition-group>
</draggable>

.draggable-wrapper span{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
}
.box-menu-content-item-subject-item{
  margin: 10px 10px;
  width: 110px;
  background-color: rgba(116, 185, 255,1);
  padding: 10px 5px;
  border-radius: 5px;
}

.item-select{
  background-color:#409EFF
}

.box-menu-content-item-subject-item-div{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box-menu-content-item-subject-item-div span{
  display: block;
  font-size: small;
  margin-top: 5px;
  max-width: 90px;
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #ffffff;
}

参考

Vue.Draggable使用文档总结 - 掘金

Vue——使用vuedraggable实现拖拽 - it610.com

弹性布局（display:flex;）属性详解 - cdgogo - 博客园