@dnd-kit/固态

固态JS适配器 @dnd-kit (英语) 一个轻量级、能发挥的和可扩展的拖放工具包。 建于顶上 @dnd-kit/dom。 。 。 .

安装

npm install @dnd-kit/solid

快开始

import {createSignal} from 'solid-js';
import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/solid';

function Draggable() {
  const {ref} = useDraggable({id: 'draggable'});
  return <button ref={ref}>Drag me</button>;
}

function Droppable(props) {
  const {ref} = useDroppable({id: 'droppable'});
  return <div ref={ref}>{props.children}</div>;
}

function App() {
  const [parent, setParent] = createSignal(null);

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;
        setParent(event.operation.target?.id ?? null);
      }}
    >
      {parent() == null ? <Draggable /> : null}
      <Droppable>{parent() ? <Draggable /> : 'Drop here'}</Droppable>
    </DragDropProvider>
  );
}

钩子

构成部分

• <DragDropProvider> ——将您的拖放接口包起来,管理传感器,插件和事件.
• <DragOverlay> ——在拖动操作中渲染自定义的叠加元素.

文档

访问 dndkit.com (英语) 用于完整的文档、指南和互动实例.