基于vuedraggable.js 嵌套数据开发的拖拽功能

最新推荐文章于 2024-08-09 07:29:25 发布
最新推荐文章于 2024-08-09 07:29:25 发布
阅读量465 收藏
点赞数 4
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51794873/article/details/140126788
版权

本贴 适用与vue2 ， vuedraggable.js 版本 "vuedraggable": "^2.24.3" 

由于js有原生的属性可以拖拽dom元素，需要在组件添加 ‘forceFallback="true"’ 这属性， 否则可能会导致页面组件不能拖拽，这个问题也分浏览器，

  数据的拖拽原数据 与嵌套深度数据 之前的唯一 值， id  最好别冲突， 页面容易报错 

 

vuedraggable.js 二次开发

第一步  在vue 2 中引入  vuedraggable.js

npm i -S vuedraggable

第二步 创建 home.vue 组件名称

第三步 复制下面代码

<template>
  <div id="app">
    <el-row :gutter="22">
      <el-col :span="6" class="itxst">
        <div class="title">车队</div>
        <draggable v-model="catList" :group="cat" @start="originalStart($event, 1)" @sort="originalSort($event, 1)"
          @end="originalEnd(1)" :disabled="catListShow" forceFallback="true" animation="1" dragClass="dragClass"
          ghostClass="ghostClass" chosenClass="chosenClass" style="width: 180px">
          <transition-group>
            <div class="item" v-for="item in catList" :key="item.id">
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>

        <div class="title">司机名称</div>
        <draggable v-model="driverList" :group="driver" @end="end($event, 2)" @add="add($event, 2)"
          :disabled="driverListShow" @start="originalStart($event, 2)" forceFallback="true" animation="300"
          dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass">
          <transition-group>
            <div class="item" v-for="item in driverList" :key="item.id">
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>

        <div class="title">班车路线</div>
        <draggable v-model="lineList" :group="line" @end="end($event, 6)" @add="add($event, 6)" :disabled="lineListShow"
          @start="originalStart($event, 6)" forceFallback="true" animation="300" dragClass="dragClass"
          ghostClass="ghostClass" chosenClass="chosenClass">
          <transition-group>
            <div class="item" v-for="item in lineList" :key="item.id">
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </el-col>

      <el-col :span="18" class="itxst">
        <div v-for="(item, index) in groupList" :key="index">
          <div style="display: flex">
            <div style="width: 20px; background: #2c3e50; color: #eeeeee">
              {{ item.tripTxet }}
            </div>

            <!--               移动表格-->
            <draggable v-model="item.tripList" :group="tripListGroup" :disabled="tripListShow" forceFallback="true"
              animation="300" style="width: 1200px; border: 1px solid yellow" @start="originalStart($event, 3)"
              @end="end($event, 3)" @add="add($event, 3)" dragClass="dragClass" ghostClass="ghostClass"
              chosenClass="chosenClass">
              <transition-group style="display: flex; min-height: 250px">
                <div style="width: 200px; padding: 20px; background: darkgoldenrod" v-for="items in item.tripList"
                  :key="items.id">
                  <div>{{ items.tripListTxet }}</div>

                  <!--                  车牌移动-->

                  <draggable v-model="items.catListTiem" :group="cat" @start="startSon(4, items, items.id)"
                    @sort="sortSon(4, items.id, items)" @end="endSon(4, items.id)" @add="addSon(4, items.id)"
                    :disabled="catListShow" forceFallback="true" style="min-height: 80px">
                    <transition-group style="height: 80px">
                      <div v-for="(itemk ,index) in items.catListTiem" :key="index">
                        <div class="item" style="color: chartreuse; background: black">
                          {{ itemk.name }}
                        </div>
                        <div class="item" style="color: chartreuse; background: black">
                          {{ itemk.catNum }}
                        </div>
                      </div>
                    </transition-group>
                  </draggable>

                  <!--                  司机移动-->

                  <draggable v-model="items.driverListTiem" :group="driver" @start="start(5, items)"
                    @end="end($event, 5, item.tripList)" @add="add($event, 5)" :disabled="driverListShow"
                    forceFallback="true" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                    chosenClass="chosenClass">
                    <transition-group>
                      <div v-for="itemk in items.driverListTiem" :key="itemk.id">
                        <div class="item" style="
                            color: chartreuse;
                            height: 30px;
                            background: black;
                          ">
                          {{ itemk.name }}
                        </div>
                      </div>
                    </transition-group>
                  </draggable>

                  <!--              班车路线    -->
                  <draggable v-model="items.lineListTiem" :group="lineGroup" @start="start(7, items)"
                    @end="end($event, 7, item.tripList)" @add="add($event, 7)" :disabled="lineListShow"
                    forceFallback="true" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                    chosenClass="chosenClass">
                    <transition-group>
                      <div v-for="itemj in items.lineListTiem" :key="itemj.id">
                        <div class="item" style="
                            color: chartreuse;
                            height: 30px;
                            background: black;
                          ">
                          {{ itemj.name }}
                        </div>
                      </div>
                    </transition-group>
                  </draggable>
                </div>
              </transition-group>
            </draggable>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";

export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,

      tripListShow: false, // 表格拖动
      catListShow: false, // 车牌拖动
      driverListShow: false, // 司机拖动
      lineListShow: false, //  班车拖拽
      message: "",

      // 车队原始数组
      cat: {
        name: "cat",
        put: true, //可以拖入
        pull: true,
      },
      // 司机原始数组
      driver: {
        name: "driver",
        put: true, //可以拖入
        pull: true,
      },

      line: {
        name: "line",
        put: "clone", //可以拖入
        pull: "clone",
      },

      lineGroup: {
        name: "line",
        put: true, //可以拖入
        pull: true,
      },

      //   表格拖动规则
      tripListGroup: {
        name: "itxst",
        pull: true, //B组拖拽时克隆到A组
        put: true,
      },

      // 二维数据动态切换

      groupList: [
        {
          tripTxet: "班车1",

          tripList: [
            {
              tripListTxet: "01",
              id: 2345,
              catListTiem: [
                {
                  id: 111,
                  name: "浙GDU6858",
                  catNum: "1210Km",
                },
              ],

              driverListTiem: [{ id: 51, name: "林炳书" }],
              lineListTiem: [
                { id: 52, name: "穹灵路石码头" },
                { id: 53, name: "藏书中学" },
                { id: 54, name: "天池村" },
              ],
            },
            {
              tripListTxet: "02",
              id: 2,
              catListTiem: [
                {
                  id: 221,
                  name: "浙GDQ6983",
                  catNum: "120Km",
                },
              ],

              driverListTiem: [{ id: 65, name: "王非非" }],
              lineListTiem: [
                { id: 6, name: "穹灵路石码头" },
                { id: 7, name: "藏书中学" },
                { id: 8, name: "天池村" },
              ],
            },
            {
              tripListTxet: "03",
              id: 3,
              catListTiem: [
                {
                  id: 331,
                  name: "浙GDR1753",
                  catNum: "120Km"
                }
              ],

              driverListTiem: [{ id: 9, name: "林赞利" }],
              lineListTiem: [
                { id: 11, name: "穹灵路石码头" },
                { id: 12, name: "藏书中学" },
                { id: 13, name: "天池村" },
              ],
            },
          ],
        },
        {
          tripTxet: "班车2",
          tripList: [
            {
              tripListTxet: "01",
              id: 1452,
              catListTiem: [
                {
                  id: 441,
                  name: "浙GDE3583",
                  catNum: "120Km",
                }
              ],

              driverListTiem: [{ id: 14, name: "张展" }],
              lineListTiem: [
                { id: 15, name: "穹灵路石码头" },
                { id: 16, name: "藏书中学" },
                { id: 17, name: "天池村" },
              ],
            },
            {
              tripListTxet: "02",
              id: 5,
              catListTiem: [{
                id: 551,
                name: "浙GDS8088",
                catNum: "120Km",
              }],

              driverListTiem: [{ id: 18, name: "邓超" }],
              lineListTiem: [
                { id: 19, name: "穹灵路石码头" },
                { id: 21, name: "藏书中学" },
                { id: 22, name: "天池村" },
              ],
            },
            {
              tripListTxet: "03",
              id: 6,
              catListTiem: [
                {
                  id: 661,
                  name: "浙GDV6609",
                  catNum: "120Km",
                }
              ],

              driverListTiem: [{ id: 23, name: "南争练" }],
              lineListTiem: [
                { id: 24, name: "穹灵路石码头" },
                { id: 25, name: "藏书中学" },
                { id: 26, name: "天池村" },
              ],
            },
          ],
        },
      ],

      catList: [
        { id: 1111, name: "浙GDP0638", catNum: "120Km", },
        { id: 11112, name: "浙GDP3917", catNum: "120Km", },
        { id: 11113, name: "浙GDX3823", catNum: "120Km", },
        { id: 11114, name: "浙GDK8228", catNum: "120Km", },
        { id: 11115, name: "浙GDX2166", catNum: "120Km", },
      ],

      driverList: [
        { id: 1, name: "张二辉" },
        { id: 2, name: "方龙" },
        { id: 3, name: "何俊" },
        { id: 4, name: "杨秀品" },
        { id: 5, name: "方俭侠" },
      ],
      lineList: [
        { id: 1, name: "三香公园" },
        { id: 2, name: "三香新村" },
        { id: 3, name: "三香广场" },
        { id: 4, name: "彩香新村" },
        { id: 5, name: "彩虹新村" },
      ],

      moveObj: {
        id: undefined,
        name: undefined,
        catNum: 0,
        tripListId: undefined, // 子数据外面id
      }, // 移动对象
      removeObj: {
        id: undefined,
        name: undefined,
        catNum: 0,
        tripListId: undefined, // 子数据外面id
      }, // 移出对象

      originaNum: 0, // 原数据发生交互
      sonNum: 0, //子数据发生交互
    };
  },
  mounted() { },
  methods: {
    // 原数据开始拖动
    originalStart(e, key) {
      // 原车牌拖拽  停止其他拖拽
      if (key === 1) {
        this.lineListShow = true;
        this.tripListShow = true;
        this.driverListShow = true;
        this.moveObj.id = this.catList[e.oldIndex].id; // 获取数据
        this.moveObj.name = this.catList[e.oldIndex].name;
        this.moveObj.catNum = this.catList[e.oldIndex].catNum;
        this.moveObj.tripListId = undefined;
      }

      // 司机拖拽
      if (key === 2) {
        this.catListShow = true;
        this.lineListShow = true;
        this.tripListShow = true;
      }

      // 路线
      if (key === 6) {
        this.catListShow = true;
        this.tripListShow = true;
        this.driverListShow = true;
      }

      // 表单拖拽
      if (key === 3) {
        this.catListShow = true;
        this.lineListShow = true;
        this.driverListShow = true;
      }
    },
    // 原数据发生交互
    originalSort(e, key) {
      console.log("原数据发生交互", key, this.moveObj.tripListId, this.sonNum);

      if (!this.removeObj.tripListId && this.removeObj.id) {
        this.catList.push({
          id: this.removeObj.id,
          name: this.removeObj.name,
          catNum: this.moveObj.catNum
        });
      }



      // 子数据与原数据的交互
      if (this.moveObj.tripListId && this.sonNum === 0) {
        this.groupList.map((i) => {
          i.tripList.map((j) => {
            console.log(j.catListTiem)
            if (j.catListTiem.length === 0) {

              j.catListTiem.push({
                id: undefined,
                name: undefined,
                catNum: "0KM",
              })

            }
          });
        });
      }


    },

    //数据开始拖拽
    start(key, item, index) {
      if (key === 4) {
        this.lineListShow = true;
        this.tripListShow = true;
        this.driverListShow = true;
      }

      // 司机拖拽
      if (key === 5) {
        this.catListShow = true;
        this.lineListShow = true;
        this.tripListShow = true;
      }

      // 路线
      if (key === 7) {
        this.catListShow = true;
        this.tripListShow = true;
        this.driverListShow = true;
      }
    },

    /**
     * start	开始拖动时触发的事件
     add	从一个数组拖拽到另外一个数组时触发的事件
     remove	移除事件
     update	拖拽变换位置时触发的事件
     end	拖拽完成时的事件
     choose	鼠标点击选中要拖拽元素时的事件
     unchoose	选中后松开鼠标的事件
     sort	位置变化时的事件
     clone	从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素
     */

    // 被拖动项
    originalEnd(key) {



      console.log("原数据结束", key);
      this.sonNum = 0;
      this.end();
    },

    // 开始拖动 子车牌被拖拽 记录数据moveObj
    startSon(key, item, index) {
      console.log("开始拖动", key, item, index);
      this.moveObj.id = item.catListTiem[0].id;
      this.moveObj.name = item.catListTiem[0].name;
      this.moveObj.catNum = item.catListTiem[0].catNum;
      this.moveObj.tripListId = index;
      if (key === 4) {
        this.lineListShow = true;
        this.tripListShow = true;
        this.driverListShow = true;
      }
    },

    //  子数据发生交互
    sortSon(key, id, items) {
      console.log("子数据发生交互", key, id, items, this.sonNum, this.moveObj);

      this.sonNum++;

      if (this.sonNum === 2) {
        //是子数据之前的交互

        this.groupList.map((i) => {
          i.tripList.map((j) => {
            if (j.catListTiem && j.catListTiem.length > 1) {
              j.catListTiem.forEach((item, index, arr) => {
                console.log(item);
                if (item.id != this.moveObj.id) {
                  this.removeObj.id = item.id;
                  this.removeObj.name = item.name;
                  this.removeObj.catNum = item.catNum;
                  this.removeObj.tripListId = this.moveObj.tripListId; //   拖拽的外部id
                  arr.splice(index, 1);
                }
              });
            }
          });
        });
      }

      if (this.sonNum === 1 && !this.moveObj.tripListId) {
        //原数据与子数据交互

        this.groupList.map((i) => {
          i.tripList.map((j) => {
            if (j.catListTiem && j.catListTiem.length > 1) {
              j.catListTiem.forEach((item, index, arr) => {
                console.log(item);
                if (item.id != this.moveObj.id) {
                  this.removeObj.id = item.id;
                  this.removeObj.name = item.name;
                  this.removeObj.catNum = item.catNum;
                  this.removeObj.tripListId = undefined; //   拖拽的外部id
                  arr.splice(index, 1);
                }
              });
            }
          });
        });
      }
    },

    // 子被拖动项
    endSon(key) {
      console.log("结束了", key, this.removeObj, this.sonNum);

      // this.tripListId 子数据会被存储
      //this.tripListId =2 是子数据与子数据之间变换位置

      if (this.sonNum === 2 && this.removeObj.tripListId) {
        console.log("子数据发生交互");
        this.groupList.map((i) => {
          i.tripList.map((j) => {
            console.log("结束了!", key);
            if (j.id === this.removeObj.tripListId) {
              j.catListTiem.push({
                id: this.removeObj.id,
                name: this.removeObj.name,
                catNum: this.removeObj.catNum
              });
            }
          });
        });
        this.sonNum = 0;
      } else {
        // 重置子数据的次数
        this.sonNum = 0;
      }





      this.end();
    },

    //被接受项触发
    addSon(key, id) {
      // console.log("BAIO", key, id);
    },

    //被接受项触发
    add(key, id) {
      // console.log("BAIO", key, id);
    },

    // 重置数据
    ert() {
      this.moveObj = {
        id: undefined,
        name: undefined,
        catNum: undefined,
        tripListId: undefined, // 子数据外面id
      }; // 移动对象
      this.removeObj = {
        id: undefined,
        name: undefined,
        catNum: undefined,
        tripListId: undefined, // 子数据外面id
      }; // 移出对象
    },

    // 被拖动结束，被拖动触发
    end(key, item) {
      this.catListShow = false;
      this.tripListShow = false;
      this.driverListShow = false;
      this.lineListShow = false;
      this.ert();
    },
  },
};
</script>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: blue !important;
}

.chosenClass {
  background-color: red !important;
  opacity: 1 !important;
}

.dragClass {
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.itxst {
  -moz-user-select: none;
  /*Firefox私有属性*/
  -webkit-user-select: none;
  /*WebKit内核私有属性*/
  -ms-user-select: none;
  /*IE私有属性(IE10及以后)*/
  -khtml-user-select: none;
  /*Khtml内核私有属性*/
  -o-user-select: none;
  /*Opera私有属性*/
  user-select: none;
  /*Cs53属性*/
}

.title {
  padding: 6px 12px;
  background: #2c3e50;
  color: blue;
}

.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}

.col+.col {
  margin-left: 10px;
}

.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}

.item+.item {
  border-top: none;
  margin-top: 6px;
}
</style>

第五步  效果  

蔣氏
关注
vuedraggable嵌套块拖拽_Vue 基于 vuedraggable 实现选中、拖拽、排序效果
weixin_33477290的博客
01-30 1287
今天有个朋友说要做个效果：Vue实现拖拽排序，要有 checked，输出结果是排序后的，要全选，未选中的不能拖动。其实我之前基于 Sortable 做过一个类似的效果。也给他看过了，没看太明白，他就自己基于 vuedraggable 实现了一下。正好有点问题给他解决了一下。废话不多说，先上最终效果：Vue 拖拽排序效果 测试地址。下面就是最终效果图。效果一：实现选中 和 全选效果就下面这样，ele...
基于vue-draggable 的三级拖动排序
qq_37048894的博客
01-09 1121
vue-draggable 之前项目中需要用到拖动排序，就去网上找资料，本来最开始是想用jquery-ui里的拖动的，后面发现不符合我的预期也不知道能不能跟vue.js兼容，后面我试过了，单个的可以但是层级太多就不一样了。 废话少说直接上代码 先看数据结构，和页面的呈现，等会再来上代码。 这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的，点击后会出现当前类型所带的产品。等会...
前端开发之VueDraggable使用和实例
m0_50207524的博客
06-03 6474
vueDraggable的使用
Draggable.js 开源项目教程
最新发布
gitblog_00688的博客
08-09 415
Draggable.js 开源项目教程 draggableThe JavaScript Drag & Drop library your grandparents warned you about.项目地址:https://gitcode.com/gh_mirrors/dr/draggable 项目介绍 Draggable.js 是一个模块化的拖放库，由 Shopify 开发并开源。它允许用户快...
【vue2多列拖拽组件】vue.draggable嵌套拖拽使用
Fantasywt的博客
09-08 2821
/一个网页存在多个分组时设置//是否允许列内部排序，如果为false当有多个排序组时,多个组之间可以拖拽，本身不能拖拽// 按下鼠标后多久可以拖拽 1000表示1秒delay: 0,//如果为false按下鼠标不动才计算延时，移动则无效//当按下鼠标移动了n个像素时会取消延迟delay事件，即可超过了这个范围无法拖动元素了//启用禁用拖拽//Store//动画效果// Easing 动画 默认null. See https://easings.net/ for examples.
vuedraggable嵌套块拖拽_Vue.Draggable实现拖拽效果
weixin_39762075的博客
12-20 554
快速实现Vue.Draggable的拖拽效果，供大家参考，具体内容如下1.下载包：npm install vuedraggable配置：package.json"dependencies": {"element-ui": "^1.3.4","less": "^2.7.2","less-loader": "^4.0.4","vue": "^2.3.3","vue-router": "^2.3.1",...
vuedraggable嵌套块拖拽_请教 vue draggable 拖拽问题
weixin_33104731的博客
12-30 1150
v-for="i in item":key="i":style="'width:' + Math.round(i / 750 * 10000) / 100.00 + '%'">{{i}}import draggable from "vuedraggable";export default {components: { draggable },data() {return {rowspan: ...
vue中使用vuedraggable实现嵌套多层拖拽排序功能
浩星
04-22 9091
前言： vue中实现嵌套多层拖拽功能。 官网入口：https://www.npmjs.com/package/vuedraggable 实现效果：（拖动左侧调整一级的顺序，拖动右侧调整二级的顺序） 实现步骤： ***这里使用了插件 vuedraggable 第一步：安装插件 cnpm install vuedraggable --save 第二步：在页面上引入插件并注册 import draggable from 'vuedraggable' components: { ...
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
11-20
vuedraggable 是基于 Sortable.js 的 Vue 适配器，它允许用户轻松地在 Vue 组件之间进行拖放操作，并且能够保持数据模型同步。在本文中，我们将探讨如何利用 vuedraggable 来实现选中、拖拽和排序的效果。 首先，...
Vue组件Draggable实现拖拽功能
10-17
Vue组件Draggable是基于Sortable.js封装的一个Vue组件，它为开发者提供了一种便捷的方式来实现拖拽功能。Draggable组件可以让用户在网页上拖动DOM元素，从而改变它们的顺序，这在构建交互式的用户界面时非常有用。...
vuedraggable+element ui实现页面控件拖拽排序效果
10-17
主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
前端岚枫
02-10 7500
最近几天在研究有关vue实现拖拽的功能，不过跟一般的拖拽排序有点不同，这个需求可能出现多行多列嵌套的表单元素，数据也是递归形式的出现。我也是在vuedraggable的基础上扩展实现的，如何想了解更多的拖拽排序功能可以参考https://sortablejs.github.io/Vue.Draggable/#/simple 需要实现的功能 表单元素可能出现嵌套，数据出现树形结构 实现拖拽功能...
vuedraggable嵌套块拖拽_vue使用vuedraggable实现拖拽排序布局
weixin_39800990的博客
12-20 473
import draggable from “vuedraggable”; {{item.name}}ID：{{item.id}}原价{{item.oldPrice}}￥：{{item.price}}//拖拽shopList: [{id: 11111,name: "哈阿达哈",oldPrice: 152,price: 55},{id: 151,name: "有哈",oldPrice: 155,p...
vuedraggable嵌套块拖拽_vuedraggable 拖拽 应用 不同列表之间的拖拽
weixin_39762838的博客
12-20 371
{{item.name}}银行排序注：可拖动银行进行排序展示{{i}}、{{a.name}}银行卡片排序v-model="searchForm.bankId"placeholder="请选择"@change="getCardListByBankId">v-for="(item,index)inbanks":key="index":label="item.name":value="ite...
vue拖拽组件使用 嵌套使用
qq_28087501的博客
05-26 1595
下载插件 npm 输入 npm i -S vuedraggable 或者 yarn add vuedraggable 页面引入组件 import draggable from 'vuedraggable' 插入代码块<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false"> <div v-for="element in myArray" :key="element.id"&g.
vuedraggable嵌套块拖拽_Vue.Draggable拖拽效果
weixin_39785286的博客
12-20 792
使用abp模板创建解决方案前言 ABP官网(http://www.aspnetboilerplate.com/),本地环境 sql serverEXPRESS +vs2013 通过官网生成module zero解决方案模 ...redis pub&sol;sub 实战&colon; 微信语音识别2015年5月22日 20:20:20 星期五 效果: 这边对微信说话, 浏览器...
vuedraggable拖拽案例（布局只嵌套一层，不能无限嵌套）
bx182395_的博客
04-24 2195
简易表单布局
【elementUI系列一】vue拖拽功能实现-vuedraggable实现多层嵌套拖拽
qq_37485170的博客
02-10 5481
draggable区域内嵌入多层，要把拖拽区域加上class名称，draggable=‘.class名’,这样就能确保draggable内部分可以拖拽，部分不能拖拽 el-image的点击事件和vue.draggable的拖拽事件会有事件冲突的问题，那么你需要使用.stop和.prevent修饰符来禁止默认事件和冒泡.
node.js嵌套使用populate
06-08
好的，关于node.js嵌套使用populate，我可以给你一些解释和示例代码。 在mongoose中，populate是一种查询数据的方式，可以将文档中的引用字段填充为关联文档的内容。嵌套使用populate的情况通常发生在文档中有多个引用字段，这些引用字段又分别引用了其他文档的情况。 例如，我们有一个User模型和一个Post模型，每条Post都有一个作者和若干评论，每个评论也有一个作者。在查询某个Post时，我们希望同时填充Post的作者、评论的内容和评论的作者，这就需要嵌套使用populate。 下面是示例代码： ```javascript Post.findById(postId) .populate('author') .populate({ path: 'comments', populate: { path: 'author' } }) .exec(function(err, post) { // post中包含填充后的数据 }); ``` 在这个例子中，我们首先使用populate填充Post的作者字段。接着，我们使用populate嵌套查询Post的comments字段，并填充每个评论的author字段。这里的path参数指定了要填充的字段，populate参数则指定了嵌套使用的populate查询。 希望这个解释能够帮助你理解node.js中嵌套使用populate的用法。如果你有其他问题或需要进一步的帮助，请随时提出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值