Vue 可拖动、嵌套和组

编程问答 2022-04-21

问题描述

嘿伙计们，我需要一些关于在带有组的嵌套上下文中使用的 vue draggable 的帮助。一些背景故事；我正在构建一个登陆页面创建者，说我的布局遵循标准引导程序布局

  • 部分
    • 容器
      • 行
        • col
        • col

也就是说我有一个包含两种类型模块的工具箱：组件模块和布局模块。

布局模块如下所示：

  layoutToolBox: [
    {
      name: "2 column layout",icon: "font",tagName: "div",attributes: {
        id: Math.random().toString(36).substring(7),class: "row",style: {},},textNode: null,children: [
        {
          tagName: "div",attributes: {
            id: Math.random().toString(36).substring(7),class: "col",children: [],{
          tagName: "div",],

然后是组件模块：

     toolBox: [
            {
              name: "paragraph",attributes: {
                id: "toolBox-p",class: "p",textNode: "This is my paragraph from the toolBox",]

也就是说我需要布局只能拖动到顶级父级，然后我需要的组件只能在列拖动组内拖动！

仅使用组我无法使这种行为起作用，我在递归中的顶级有组部分：

<draggable
  v-model="elements"
  :group="{ name: 'section',put: true }"
  handle=".editor-ui-drag-handle"
>

然后我所有的孩子都使用组行渲染：

  <draggable
    v-bind="dragOptions"
    :list="list"
    :value="value"
    tag="div"
    :group="{ name: 'row',put: !child }"
    handle=".editor-ui-drag-handle"
    @input="emitter"
    @change="onChange"
  >

也就是说我有我认为的解决方案，但我想知道为什么小组不工作。当我将一个组设置为 2 个可拖动组（工具栏和父组）上的部分时，为什么我可以将其拖动到其子组中？为什么我可以将行组的组件拖到节组的父级中？

我现在解决这个问题的想法是使用拖动开始回调并将存储设置为一个变量，该变量表示它是父类型还是子类型，然后相应地启用/禁用放置在各个部分中，但我想知道是否有更好的方法。

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue.jsvuedraggable