44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
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>
|
|
);
|
|
}
|