反应拖放到选择
一个高性能的 React 库, 它会添加拖放到您的应用程序中 .
* 特性
- 在 2.3 GHz Quad-Core Intel Core i7 上6xCPU减速近60英尺
- 简单的API. 它不实际选择项目; 只绘制选择框并传递坐标, 这样您就可以确定( 虽然我们提供了帮助 )
- 在类型脚本中完全构建
- 单位和e2e测试
- 积极试验 生产规模应用
安装
npm install --save @air/react-drag-to-select
yarn add @air/react-drag-to-select
使用量
import { useSelectionContainer } from '@air/react-drag-to-select'
const App = () => {
const { DragSelection } = useSelectionContainer();
return (
<div>
<DragSelection/>
<div>Selectable element</div>
</div>
)
}
请检查此代码和框以获取完整的工作示例 : https://codesandbox.io/s/billowing-lake-rzhid4 互联网档案馆的存檔,存档日期2013-12-21
使用选择控制符参数
| 名称 | 需求 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
onSelectionStart | 没有 | () => void | 选择开始时调用的方法( mouse 已下调并移动) | |
onSelectionEnd | 没有 | () => void | 选择结束时调用的方法( mouse is up) | |
onSelectionChange | 对 | (box: Box) => void | 选择移动时调用的方法 | |
isEnabled | 没有 | boolean | true | 如果错误, 选择不会开火 |
eventsElement | 没有 | Window, (中文(简体) ), HTMLElement 或者说 null | window | 听鼠标事件的元素 |
selectionProps | 没有 | React.HTMLAttributes | 选择方案 - 您可以在此通过样式如下: | |
shouldStartSelecting | 没有 | () => boolean | undefined | 如果提供,这种回调会向鼠标下下发,并可用于防止选择开始. 当您想要阻止您应用程序的某些区域被选中时,此选项是有用的 。 返回真将允许选择, 返回假将阻止选择开始 . |
选择样式
样式选择框, 通过 selectionProps: { style } 道具 :
const { DragSelection } = useSelectionContainer({
...,
selectionProps: {
style: {
border: '2px dashed purple',
borderRadius: 4,
backgroundColor: 'brown',
opacity: 0.5,
},
},
});
选择框的默认样式是
{
border: '1px solid #4C85D8',
background: 'rgba(155, 193, 239, 0.4)',
position: `absolute`,
zIndex: 99,
}
在某些区域禁用选择
有时,您想要禁用用户开始在某个区域进行选择。 你可以用这个 shouldStartSelecting 道具这个.
const { DragSelection } = useSelectionContainer({
shouldStartSelecting: (target) => {
/**
* In this example, we're preventing users from selecting in elements
* that have a data-disableselect attribute on them or one of their parents
*/
if (target instanceof HTMLElement) {
let el = target;
while (el.parentElement && !el.dataset.disableselect) {
el = el.parentElement;
}
return el.dataset.disableselect !== "true";
}
/**
* If the target doesn't exist, return false
* This would most likely not happen. It's really a TS safety check
*/
return false;
}
});
见这里的全部例子: https://codesandbox.io/s/ 引用-rubin-xxf6r0 页面存档备份,存于互联网档案馆
滚动
因为我们使用鼠标位置来计算选择框的坐标,如果您 <DragSelection /> 在一个滚动的区域里,你需要做一些调整。 我们的库在本质上无法知道哪个父正在被滚动,以及它位于滚动父内部的位置(如果上面还有其他的同父异母元素).
你那边怎么解决的 left (用于横向滚动)和 top (用于垂直滚动) selectionBox 传递给 handleSelectionChange见 onSelectionChange 实例 为了一个如何做到这一点的想法.
