这是叉子!

2022年9月8日 纽约

这是叉子 反应- smooth-dnd。这一分叉的唯一目的是扩大提交文件的对应对等依赖 公关#80。如果PR被合并,则不再需要这个分叉.

反应- smooth-dnd

一个快速和轻量级拖放,可排序库用于 React , 包含许多 d&d 方案的许多配置选项 。 它使用 Css 转换动画,所以只要可能,硬件就加速.

此库包含包装器 React 组件 over 平滑倾角 图书馆.

显示,不要告诉!

演示页

安装

npm i @edorivai/react-smooth-dnd

使用量

联合来文十

import React, { Component } from "react";
import { Container, Draggable } from "@edorivai/react-smooth-dnd";

class SimpleSortableList extends Component {
  render() {
    return (
      <div>
        <Container onDrop={this.props.onDrop}>
          {this.props.items.map((item) => {
            return (
              <Draggable key={item.id}>{this.props.renderItem(item)}</Draggable>
            );
          })}
        </Container>
      </div>
    );
  }
}

API 密码

集装箱

包含可拖动元素或组件的组件。 每一个儿童都应该受到 可拖动 组件

道具

在DragStart上开始

拖曳开始时要被所有容器调用的函数 .

function onDragStart({isSource, payload, willAcceptDrop}) {
  ...
}

参数

• 来源 数字 : boolean : 如果它被拖曳的容器所调用, 则它是真实的.
• 有效载数 数字 : object :通过GetChildPayload函数返回的有效载荷物体。 如果未设定 ChildPayload , 它将被取消定义 .
• 将接受Drop 数字 : boolean :如果被拖走的物品可以被扔入容器,则属实,否则是假的.

打开

当拖曳结束时, 所有容器都要调用函数 。 以前打电话过 打开 函数

function onDragEnd({isSource, payload, willAcceptDrop}) {
  ...
}

参数

• 来源 数字 : boolean :如果它被拖动开始的容器所叫,则真实性,否则是虚假的.
• 有效载数 数字 : object :通过GetChildPayload函数返回的有效载荷物体。 如果未设定 ChildPayload , 它将被取消定义 .
• 将接受Drop 数字 : boolean :如果被拖走的物品可以被扔入容器,则属实,否则是假的.

准备

当容器中可能掉落位置的索引改变时, 被拖放的容器将调用的函数 。 基本上,每次在容器幻灯片中为被拖走的项目打开一个空格时,都会称之为拖放. 滴出结果 是传递给包含以下属性的函数的唯一参数.

function onDropReady(dropResult) {
  const { removedIndex, addedIndex, payload, element } = dropResult;
  ...
}

参数

• 滴出结果 数字 : object
  • 删除 指数 数字 : number : 被带走儿童指数。 将会是 null 如果没有任何物品被移除.
  • 已添加 指数 数字 : number : 添加已丢弃项目的索引。 将会是 null 如果没有增加项目.
  • 有效载数 数字 : object : 通过调用检索的有效载荷物体 获得儿童付费量 函数.
  • 元素 数字 : DOMElement : 移动的 DOM 元素

打开

任何相关容器在投放完毕时调用功能 。 (倒下动画结束后). 源容器和任何可接受滴水的容器都被认为是相关的. 滴出结果 是传递给包含以下属性的函数的唯一参数.

function onDrop(dropResult) {
  const { removedIndex, addedIndex, payload, element } = dropResult;
  ...
}

参数

• 滴出结果 数字 : object
  • 删除 指数 数字 : number : 被带走儿童指数。 将会是 null 如果没有任何物品被移除.
  • 已添加 指数 数字 : number : 添加已丢弃项目的索引。 将会是 null 如果没有增加项目.
  • 有效载数 数字 : object : 通过调用检索的有效载荷物体 获得儿童付费量 函数.
  • 元素 数字 : DOMElement : 移动的 DOM 元素

获得儿童付费量

使有效载荷物体通过所需的函数 打开 函数.

function getChildPayload(index) {
  return {
    ...
  }
}

参数

• 指数 数字 : number : 儿童项目索引

回返

• 有效载数 数字 : object

应 AnimateDrop

被拖放项目将降入的目标容器所调用的函数 . 有时被拖走的物品的尺寸与目标容器不相适应,而投放动画可以发抖. 这样它就可以通过返回被禁用 虚假。如果没有设置投放动画,则启用.

function shouldAnimateDrop(sourceContainerOptions, payload) {
  return false;
}

参数

• 源文件夹选项 数字 : object :源容器的选项。 (被拖走物品的上方容器)
• 有效载数 数字 : object : 通过调用检索的有效载荷物体 获得儿童付费量 函数.

回返

• 布尔 数字 : 真/ 假

应接受

拖放前所有容器的调用功能开始确定可能投放的容器. 设置此函数将覆盖 组Name 属性,只考虑此函数的返回值.

function shouldAcceptDrop(sourceContainerOptions, payload) {
  return true;
}

参数

• 源文件夹选项 数字 : object :源容器的选项。 (被拖走物品的上方容器)
• 有效载数 数字 : object : 通过调用检索的有效载荷物体 获得儿童付费量 函数.

回返

• 布尔 数字 : 真/ 假

在德拉格内

当被拖取的物品在拖取时进入其边界时,该函数将被相关容器调用.

function onDragEnter() {
  ...
}

在德拉格莱夫

当被拖放的物品在拖放时离开其界限时,由相关容器调用功能.

function onDragLeave() {
  ...
}

获取鬼父母

要获取被拖走的幽灵会被附加的元素的函数 。 默认母元素是容器本身. 幽灵元素被定位为"固定"并附在给定的父元素上. 但是,如果任何容器的内脏有变换属性,鬼元将相对于打破计算结果的元素定位. 因此,如果集装箱中有任何改变的母元素,您应当设置此属性,以便返回未改变母元素的任何元素.

function getGhostParent() {
  // i.e return document.body;
}

提交

默认情况下, Control 对组件根使用 div 元素 。 您可以通过使用 提交 函数。 如果渲染函数被设定, 儿童 集装箱道具将被忽略,并使用渲染物的还原值来制造可拖动物.

function render(ref) {
  // return ReactElement
}

参数

• 参考 数字 : object : 反应引用对象 React.create Ref () 创建参考文献

回返

• 反应元素

<Container
  render={(ref) => {
    return (
      <ul ref={ref}>
        ...place your <Draggable /> components here
      </ul>
    );
  }}
/>

可拖动

集装箱儿童包装部件。 每个可拖动的元素都应该用 可拖动 组件.

确保设置唯一的密钥到 可拖动 特别是当它包含其他 集装箱 组件

道具

提交

默认 Draggable 对组件根使用 div 元素 。 您可以通过使用 提交 函数。 如果渲染函数被设定, 儿童 将忽略可拖放的道具,并将使用渲染的还原值来使可拖放.

<Draggable
  render={() => {
    return <li>...</li>;
  }}
/>

参数

• 参考 数字 : object : 反应引用对象 React.create Ref () 创建参考文献

回返

• 反应元素