研究解决vuedraggable只能纵向(单方向)拖拽问题

Posted 2021-09-22 365/24/60

vue文件--template部分

<template>
  ...
      <draggable
        v-model="dragList"
        v-bind="{ ...dragConfig }"
        @add="handleNodeAdd"
      >
        <div v-for="(sublist, index) in dragList" :key="index + Date.now()">
          <div class="box-row">
            <draggable v-model="sublist.children" v-bind="{ ...dragConfig }">
              <div
                v-for="(element, index) in sublist.children"
                :key="element.key + Date.now()"
                :label="fields[element.type]"
              >
                <element-item
                  v-if="element && element.key"
                  :element="element"
                  :index="index"
                  @dnode="delNode"
                  :data="element"
                ></element-item>
              </div>
              <empty-item></empty-item>
            </draggable>
          </div>
        </div>
        <empty-list></empty-list>
      </draggable>
  ...
</template>

样式部分

empty {
  &-list {
    width: 80%;
    display: inline-block;
    height: 100px;
    background-color: rgb(233, 223, 195);
  }
  &-item {
    width: 10%;
    display: inline-block;
    height: 100px;
    background-color: rgb(194, 156, 50);
  }
}
.box-row > div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  li.ghost {
    background: #f56c6c;
    border: 2px solid #f56c6c;
    outline-width: 0;
    height: 10px;
    box-sizing: border-box;
    font-size: 0;
    content: "";
    overflow: hidden;
    padding: 0;
  }
}