drop zone should be in core.

docs/pages/playground.vue

@@ -32,29 +32,34 @@ dragAndDrop({
 });
 
 onMounted(() => {
-  dragAndDrop({
-    parent: secondList,
-    values: secondListValues,
-    config: {
-      draggable: (child: HTMLElement) => {
-        return child.classList.contains("item");
-      },
-      plugins: [
-        dropZone({
-          group: "test",
-          dropZones: [dropZoneHere, dropZoneHere2],
-          //dropZones: [document.getElementById("first_list_target")],
-        }),
-        //dropZones: [{ element: dropZoneHere }, { element: dropZoneHere2 }],
-      ],
-    },
-    //config: {
-    //  dropZoneClass: "opacity",
-    //  draggable: (child: HTMLElement) => {
-    //    return child.classList.contains("item");
-    //  },
-    //},
-  });
+  //dragAndDrop({
+  //  parent: secondList,
+  //  values: secondListValues,
+  //  config: {
+  //    draggable: (child: HTMLElement) => {
+  //      return child.classList.contains("item");
+  //    },
+  //    plugins: [
+  //      //dropZone({
+  //      //  group: "test",
+  //      //  dropZones: [
+  //      //    { element: dropZoneHere, config: { test: "hello" } },
+  //      //    { element: dropZoneHere2, position: "bottom" },
+  //      //    document.getElementById("first_list_target"),
+  //      //  ],
+  //      //  //dropZones: [dropZoneHere, dropZoneHere2],
+  //      //  //dropZones: [document.getElementById("first_list_target")],
+  //      //}),
+  //      //dropZones: [{ element: dropZoneHere }, { element: dropZoneHere2 }],
+  //    ],
+  //  },
+  //  //config: {
+  //  //  dropZoneClass: "opacity",
+  //  //  draggable: (child: HTMLElement) => {
+  //  //    return child.classList.contains("item");
+  //  //  },
+  //  //},
+  //});
 });
 
 const testValues1 = computed(() => {
@@ -112,6 +117,7 @@ setTimeout(() => {
         id="second_list_values"
         class="values"
       />
+      <div id="third_list_target">Hello</div>
     </div>
   </main>
 </template>

src/index.ts

@@ -98,14 +98,14 @@ export default function initParent({
 
   const currentPlugins = Data.parents.get(parent)?.config?.plugins;
   currentPlugins?.forEach((plugin) => {
-    plugin(parent, config, globals()).tearDown();
+    console.log("tear down", plugin);
+    //plugin(parent, config, globals()).tearDown();
     //console.log("tear down", plugin);
     //plugin(parent, config, globals()).tearDown();
     //if (plugin.tearDown) {
     //  plugin.tearDown(parent, config, globals());
     //}
   });
-  return;
   const mergedConfig = { ...defaultActions, root: document, ...config };
 
   Data.parents.set(parent, {

src/plugins/dropZone/index.ts → src/plugins/selections/index.ts

@@ -1,13 +1,15 @@
 import type { VueDropZoneConfig } from "./vue/types";
 
-export function dropZone(dzConfig: VueDropZoneConfig = {}) {
+export default function dropZone(dzConfig: VueDropZoneConfig = {}) {
   //console.log("init dropzone", parent, config, globals);
   // end-user scope
   console.log("dropZone plugin in index");
-  return () => {
-    return {
-      setup() {},
-      tearDown() {},
-    };
-  };
+  //return () => {
+  //  return {
+  //    setup() {},
+  //    tearDown() {},
+  //  };
+  //};
 }
+
+//function

src/plugins/selections/vue/index.ts

@@ -0,0 +1,95 @@
+//import type { DropZone } from "../../../types";
+import type { VueDropZoneConfig, VueDropZone, VueElement } from "./types";
+
+import { watch } from "vue";
+
+import { isBrowser } from "../../../utils";
+
+import { getEl } from "../../../vue/utils";
+
+import initDropZone from "../index";
+
+export function dropZone(dzConfig: VueDropZoneConfig = {}) {
+  console.log("hello", dzConfig);
+  //console.log("dropzone", setUpDropZone);
+
+  if (!isBrowser || !dzConfig.dropZones?.length) return;
+
+  const enabledDZs = [];
+
+  console.log("dropZone plugin in index");
+
+  dzConfig.dropZones.forEach((dz: VueDropZone | VueElement) => {
+    console.log("dz", dz);
+    const validParent = getEl(dz.element);
+
+    console.log("validParent", validParent);
+
+    //return;
+
+    if (validParent) {
+      return initDropZone(validParent);
+    } else {
+      const stop = watch(dz, (newParent) => {
+        if (!newParent) return;
+
+        const validParent = getEl(newParent);
+
+        if (!validParent) {
+          console.warn("Invalid parent element", newParent);
+        } else {
+          initDropZone(validParent, dnd);
+        }
+
+        stop();
+      });
+    }
+  });
+}
+
+//setup({})(null, null, null);
+
+// parent html element
+
+//return (parent: HTMLElement) => {
+//  return {
+//    setup,
+//    teardown
+//  }
+//}
+
+//return {
+//  setup,
+//  tearDown,
+//};
+
+//if (dzConfig.dropZones && isBrowser) {
+//  const dropZones = dzConfig.dropZones;
+
+//  for (const dz of dropZones) {
+//    const el = getEl(dz.element);
+
+//    if (el instanceof HTMLElement) {
+//      enabledDZs.push(el);
+//    } else {
+//      const stop = watch(dz.element, (newEl) => {
+//        if (newEl instanceof HTMLElement) {
+//          stop();
+
+//          enabledDZs.push(newEl);
+
+//          return setUpDropZone(dzConfig, parent, globals);
+//        } else {
+//          console.warn("Invalid dropzone element", newEl);
+//        }
+//      });
+//    }
+//  }
+
+//  delete dzConfig.dropZones;
+//}
+
+//dzConfig.validDropZones = enabledDZs;
+
+//return setUpDropZone(dzConfig, parent, globals);
+//}

src/plugins/dropZone/vue/types.ts → src/plugins/selections/vue/types.ts

@@ -9,5 +9,7 @@ export interface VueDropZone extends Omit<DropZone, "element"> {
 }
 
 export interface VueDropZoneConfig extends Omit<DropZoneConfig, "dropZones"> {
-  dropZones?: Array<VueDropZone>;
+  dropZones?: Array<VueDropZone> | Array<VueElement>;
 }
+
+//export type VueDropZone =