Solution for issue #647

Author: David-Desmaisons

example/components/functional.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="row">
+    <div class="col-8">
+      <h3>Draggable</h3>
+
+      <draggable
+        v-model="rows"
+        tag="v-layout"
+        class="row wrap fill-height align-center sortable-list"
+        style="background: grey;"
+      >
+        <v-flex
+          v-for="row in rows"
+          :key="row.index"
+          class="sortable"
+          xs12
+          my-2
+          style="background: red"
+        >
+
+          <draggable
+            :list="row.items"
+            tag="v-layout"
+            :group="{ name: 'row' }"
+            class="row wrap justify-space-around"
+          >
+            <v-flex
+              v-for="item in row.items"
+              :key="item.title"
+              xs4
+              pa-3
+              class="row"
+            >
+              <v-card style="height: 100px;">{{ item.title }}</v-card>
+            </v-flex>
+          </draggable>
+
+        </v-flex>
+      </draggable>
+    </div>
+
+    <rawDisplayer
+      class="col-3"
+      :value="rows"
+      title="List"
+    />
+  </div>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+import Vue from "vue";
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.min.css";
+
+Vue.use(Vuetify);
+
+export default {
+  name: "functional",
+  display: "Functional third party",
+  order: 17,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      enabled: true,
+      rows: [
+        {
+          index: 1,
+          items: [
+            {
+              title: "item 1"
+            }
+          ]
+        },
+        {
+          index: 2,
+          items: [
+            {
+              title: "item 2",
+            },
+            {
+              title: "item 3"
+            }
+          ]
+        }
+      ]
+    };
+  }
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 35px;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>

package-lock.json

@@ -51,6 +51,7 @@
     "vue-router": "^3.0.2",
     "vue-server-renderer": "^2.6.8",
     "vue-template-compiler": "^2.6.8",
+    "vuetify": "^1.5.16",
     "vuex": "^3.1.1"
   },
   "eslintConfig": {

package.json

@@ -146,8 +146,7 @@ const draggableComponent = {
   data() {
     return {
       transitionMode: false,
-      noneFunctionalComponentMode: false,
-      init: false
+      noneFunctionalComponentMode: false
     };
   },
 
@@ -186,7 +185,8 @@ const draggableComponent = {
 
   mounted() {
     this.noneFunctionalComponentMode =
-      this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase();
+      this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase() &&
+      !this.getIsFunctional();
     if (this.noneFunctionalComponentMode && this.transitionMode) {
       throw new Error(
         `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.getTag()}`
@@ -251,6 +251,11 @@ const draggableComponent = {
   },
 
   methods: {
+    getIsFunctional() {
+      const { fnOptions } = this._vnode;
+      return fnOptions && fnOptions.functional;
+    },
+
     getTag() {
       return this.tag || this.element;
     },
@@ -265,12 +270,6 @@ const draggableComponent = {
     },
 
     getChildrenNodes() {
-      if (!this.init) {
-        this.noneFunctionalComponentMode =
-          this.noneFunctionalComponentMode && this.$children.length === 1;
-        this.init = true;
-      }
-
       if (this.noneFunctionalComponentMode) {
         return this.$children[0].$slots.default;
       }