Puck，React 拖拽功能的革命性突破

Puck 0.18版本的发布，标志着React拖拽功能的一次重大飞跃。这一版本引入了全新的拖拽引擎，支持CSS Grid和Flexbox，极大地提升了灵活性和用户体验。无论是开发者还是设计师，都能从中受益。接下来，让我们深入了解Puck 0.18的主要功能和如何快速上手。

更新到最新版本

如果你是首次使用Puck，可以通过以下命令安装最新版本：

npm install @measured/puck --save

如果你已经在项目中使用了Puck，可以通过以下命令进行更新：

npm update @measured/puck

由于此次更新没有引入任何破坏性更改，你可以直接开始探索新功能，无需担心兼容性问题。

自由多维拖拽

Puck 0.18的拖拽引擎彻底改变了用户体验。此前，Puck的拖拽功能主要限制在垂直方向，虽然可以通过DropZone API实现多列布局，但用户需要手动调整组件位置，且在调整列数时需要重新组织组件。现在，你可以自由地在画布上以任何方向拖拽React组件——无论是垂直、水平还是在响应式网格中，Puck都会提供即时的视觉反馈，展示组件放置后的布局效果。

设置也非常简单，你只需要在Puck的config中将DropZone设置为网格或弹性盒模型即可：

Grid: {
  //... 字段配置
  render: ({ columns }) => (
    <DropZone
      zone="my-grid"
      style={{
        display: "grid",
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
      }}
    />
  ),
},

高级CSS布局

此前，所有Puck组件都被包裹在一个div中，这使得组件无法作为其父DropZone的直接子元素，这对于CSS网格或弹性盒模型布局来说是必要的。通过新的inline参数，你可以完全移除Puck的包裹层，使子组件成为DropZone的直接子元素。这使得flex-grow或grid-column等CSS规则能够按预期工作。

https://www.zuocode.com

例如，如果你想创建一个卡片网格，允许用户通过grid-column和grid-row CSS规则自定义每个卡片的行数和列数，你可以这样配置组件：

Card: {
  //... 字段配置
  // 启用inline模式以移除默认的包裹div
  inline: true,
  render: ({ spanRow, spanCol, puck }) => {
    return (
      <div
        style={{
          border: "1px solid black",
          gridColumn: `span ${spanCol}`,
          gridRow: `span ${spanRow}`,
        }}
        // 将拖拽引用传递给新的可拖拽div
        ref={puck.dragRef}
      >
        卡片内容
      </div>
    );
  },
},
Grid: {
  //... 字段配置
  render: ({ columns, rows }) => (
    <DropZone
      zone="my-grid"
      style={{
        display: "grid",
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gridTemplateRows: `repeat(${rows}, 1fr)`,
      }}
    />
  ),
},

跨DropZone容器拖拽

此次更新中最令人兴奋的功能之一是能够在不同的DropZone容器之间拖拽组件。此前，你只能在共享同一父级的区域之间拖拽组件，这显然限制了灵活性。现在，无论是在兄弟区域之间移动组件，还是将其拖拽到嵌套的子级中，甚至从子级拖拽回父级，都变得轻而易举——无需额外设置。

动态DropZone高度

DropZone也进行了重大改进：它们现在会根据子元素的高度动态调整自身高度，并准确预览最终渲染效果。此外，你还可以为为空的DropZone设置占位高度，从而定义它们在为空时的行为，让你完全控制编辑器的布局，并根据需要突出显示DropZone。

例如，你可以在页面顶部显示一个较短的导航栏DropZone，同时保持主内容DropZone尽可能高。在0.18版本中，你可以通过以下配置实现：

root: {
  render: () => (
    <div>
      <DropZone
        zone="nav"
        // 设置为空时的高度为80像素
        minEmptyHeight={80}
        style={{ maxHeight: 100 }}
      />
      <DropZone
        zone="main"
        // 设置为空时的高度为500像素
        minEmptyHeight={500}
      />
    </div>
  ),
},

扩展组件抽屉为网格

默认情况下，Puck会将Drawer（所有可拖拽组件的容器）渲染为侧边栏中的垂直列表。此前，你可以通过自定义界面来决定其位置，但无法将其显示为网格。由于旧的拖拽引擎限制，这在以前是不可能实现的。但随着0.18版本中引入的新引擎，这一限制已经消除。

探索0.18的更多功能

0.18版本中还有许多其他功能，无法在此一一介绍。以下是除了拖拽功能更新之外的其他亮点：

交互热键切换：在预览模式下，通过cmd+i（Windows上为ctrl+i）热键轻松切换组件的交互性，方便测试交互组件而无需离开编辑器。

选择父级操作：直接从操作栏快速选择组件的父级，使导航嵌套组件更加顺畅。

移除position: fixed：从默认布局中移除了这一样式，使将Puck嵌入你的应用程序变得更加简单。

新的<ActionBar.Label>组件：使用新的<ActionBar.Label>组件组织和分隔操作栏的部分，使其更直观。

更多详细信息，请查阅官方文档。

结语

Puck v0.18是社区共同努力的成果。此次更新不仅仅是向前迈出的一步，而是一次巨大的飞跃。我们非常期待看到你用Puck构建的作品！无论你是在React中尝试拖拽编辑器、打造完美像素级设计，祝你使用愉快！

作者：倔强青铜三

链接：https://juejin.cn

+友情链接