Maintain node level

[daveKoala]

Hi @phphe
i have a structure no more than 2 levels deep ( Module and Activities ). I need to keep any Module at the root level and be able to reorder them. Activities can be reordered and moved between Modules - but can not be promoted to root level with Modules

Screen shots: This is the structure i am looking to keep

This is wrong, Modules and Activities sharing node levels

My data structure is:

 journey: [
      { text: "module 1" },
      {
        text: "module 2",
        children: [
          { text: "activity 1", droppable: false },
          {
            text: "activity 2",
            droppable: false
          },
          {
            text: "activity 3",
            droppable: false
          }
        ]
      },
      { text: "module 3", draggable: false },
      {
        text: "module 4",
        children: [
          { text: "activity 4", droppable: false },
          {
            text: "activity 5",
            droppable: false
          },
          {
            text: "activity 6",
            droppable: false
          }
        ]
      }
    ]

Many thanks in advance

DC

[phphe]

refer max level: https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/examples/MaxLevel.vue set other type nodes droppable false on drag

[Whilack]

refer max level: https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/examples/MaxLevel.vue set other type nodes droppable false on drag

can you provide an example more explicity? or add comments to https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/examples/MaxLevel.vue

[phphe]

// may like this
ondrag(node) {
     th.depthFirstSearch(this.originalData, (childNode) => {
       if (childNode === node) {
         return 'skip children'
       }
       if (node.type === 'activity') {
         this.$set(childNode, 'droppable', childNode.type === 'module')
       } else {
         this.$set(childNode, 'droppable', false)
       }
     })
   },

[daveKoala]

This is what i have....

Error in v-on handler: ReferenceError: th is not defined

<template>
  <SideDrawColumn>
    <v-card>
      <v-toolbar card color="blue lighten-3">
        <v-icon>map</v-icon>
        <v-toolbar-title>Learning Journey</v-toolbar-title>
      </v-toolbar>
      <v-card-text>
        <DraggableTree :data="journey" draggable @drag="ondrag">
          <div slot-scope="{data}">
            <span>{{data.text}}</span>
          </div>
        </DraggableTree>
      </v-card-text>
    </v-card>
  </SideDrawColumn>
</template>

<script>
import SideDrawColumn from "../layouts/SideDrawColumn.vue";
import { DraggableTree } from "vue-draggable-nested-tree";

export default {
  name: "LearningJourney",
  components: {
    SideDrawColumn,
    DraggableTree
  },
  data: () => ({
    maxLevel: 1,
    classList: [],
    data: null,
    journey: [
      { text: "module 1" },
      {
        text: "module 2",
        children: [
          { text: "activity 1", droppable: false },
          {
            text: "activity 2",
            droppable: false
          },
          {
            text: "activity 3",
            droppable: false
          }
        ]
      },
      { text: "module 3", draggable: false },
      {
        text: "module 4",
        children: [
          { text: "activity 4", droppable: false },
          {
            text: "activity 5",
            droppable: false
          },
          {
            text: "activity 6",
            droppable: false
          }
        ]
      }
    ]
  }),
  methods: {
    ondrag(node) {
      console.log("ondrag");
     th.depthFirstSearch(this.journey, (childNode) => {
       if (childNode === node) {
         return 'skip children'
       }
       if (node.type === 'activity') {
         this.$set(childNode, 'droppable', childNode.type === 'module')
       } else {
         this.$set(childNode, 'droppable', false)
       }
     })
   },
  }
};
</script>

[phphe]

@daveKoala import * as th from 'tree-helper'