wip

components/DraggableOld.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useDraggable } from "@dnd-kit/core";
+
+export function Draggable(props) {
+  const { id } = props;
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id,
+    });
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        opacity: 0.6,
+      }
+    : undefined;
+  const className = transform ? "z-30 shadow-xl relative w-min " : "z-10 relative w-min";
+
+  return (
+    <div className={className} ref={setNodeRef} style={style} {...attributes}>
+      <button
+        className="btn absolute top-1 right-1 z-20 btn-square btn-soft"
+        {...listeners}
+        onMouseDown={(e) => e.stopPropagation()} // 阻止事件冒泡
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.75 9h16.5m-16.5 6.75h16.5"
+          />
+        </svg>
+      </button>
+      {props.children}
+    </div>
+  );
+}