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

Posted 365/24/60

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了研究解决vuedraggable只能纵向(单方向)拖拽问题相关的知识,希望对你有一定的参考价值。

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;
  }
}

以上是关于研究解决vuedraggable只能纵向(单方向)拖拽问题的主要内容,如果未能解决你的问题,请参考以下文章

iOS应用程序只能支持一个tabBar项目的横向方向吗?

为 iPad 而不是 iPhone 设置横向方向

Android 屏幕方向:横向回到纵向

方向纵向和横向模式

在 iOS 14 中锁定屏幕方向

iOS CATiledLayer 崩溃