wip

components/DraggablePanel.tsx

@@ -1,25 +1,26 @@
 "use client";
-import { ReactElement } from 'react';
-import classnames from 'classnames';
+import classnames from "classnames";
+import { DndContext } from "@dnd-kit/core";
+import { Droppable } from "./Droppable";
 
 export default function DraggablePanel(props: DraggablePanelType) {
-  const { draggable, wdith = 'full', height = 'full', children } = props;
+  const { draggable, wdith = "full", height = "full", children } = props;
 
   const draggablePanelClass = classnames(
-  'p-8 grid gap-[16px]', 
-  `h-${height} w-${wdith}`,  
-  {
-    'h-full': height === 'full' || height === '100%',
-    'w-full': wdith === 'full' || wdith === '100%',
-    'base-200': draggable,     // 当 active 为 true 时添加
-    'base-100': !draggable, // 当 disabled 为 true 时添加
-  });
+    `relative h-${height} w-${wdith}`,
+    {
+      "h-full": height === "full" || height === "100%",
+      "w-full": wdith === "full" || wdith === "100%",
+      "base-200": draggable, // 当 active 为 true 时添加
+      "base-100": !draggable, // 当 disabled 为 true 时添加
+    },
+  );
   return (
-    <div className={draggablePanelClass}>
-      {
-        children
-      }
-    </div>
+    <DndContext >
+      <Droppable>
+        <div className={draggablePanelClass}>{children}</div>
+      </Droppable>
+    </DndContext>
   );
 }
 
@@ -29,4 +30,4 @@ export type DraggablePanelType = {
   height?: number | string;
   children: any;
   // grid: boolean;
-}
+};