bee-dnd
Dnd ui component for react
Last updated 6 months ago by tinper-bot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-dnd 
SYNC missed versions from official npm registry.

bee-dnd

npm version Build Status Coverage Status devDependency Status NPM downloads Average time to resolve an issue Percentage of issues still open

react bee-dnd component for tinper-bee

基于 react-beautiful-dnd 的拖拽

使用方法

import Dnd from 'bee-dnd';
class Demo1 extends Component {

    render() {
        return (
            <div>
                <Dnd >
                    <div>我可拖拽</div>
                </Dnd>
            </div>

        );
    }
}

样式引入

  • 可以使用link引入build目录下Clipboard.css
<link rel="stylesheet" href="./node_modules/bee-clipboard/build/Dnd.css">
  • 可以在js中import样式
import "./node_modules/bee-dnd/src/Dnd.scss"
//或是
import "./node_modules/bee-dnd/build/Dnd.css"

模块拖拽API

参数 说明 类型 默认值
onStart 拖拽开始的钩子函数 function -
onDrag 拖拽中的钩子函数 function -
onStop 拖拽结束的钩子函数 function -
dragClass 拖拽元素的class string -
dragingClass 拖拽中的class string -
draggedClass 拖拽过后的class string -
axis 设置可拖拽的方向 string -
handle 设置把手 string -
cancel 设置不可拖拽区域 string -
grid 设置每次拖拽移动的距离 array -
bounds 设置移动范围 object/string -

拖拽排序API

参数 说明 类型 默认值
list 需要遍历的数组 array []
onStart 拖拽开始的钩子函数 function -
onDragUpdate 拖拽中列表有更新时的钩子函数 function -
onStop 拖拽结束的钩子函数 function -
dropClass 拖动面板drop的class string -
dropOverClass 拖动面板drop被经过的class string -
dragClass 拖拽元素drag的class string -
dragingClass 拖拽元素正在被拖拽的class string -
type 设置拖拽列类型vertical单列纵向,horizontal单列横向,betweenVertical两列纵向,betweenHorizontal两列横向 vertical/horizontal/betweenVertical/betweenHorizontal -
otherList type=betweenVertical/betweenHorizontal时需要的第二个数组 array []
showKey 拖拽数组需要显示的key值,如 示例8 string -

拖拽排序回调函数参数说明

第一个参数 result

  • destination Draggable完成的位置。如果用户在不超过Droppable的情况下掉落,则目标将为空
  • draggableId 被拖动的Draggable的ID
  • source Draggable开始的位置

第二个参数

  • 单个数组为单列排序后的数组
  • 对象为两列培训后的两个数组对象

说明

本组件提供三种使用方式,第一种:模块拖拽。第二种:拖拽排序,包括:横向排序、纵向排序、两个纵向交换、两个横向交换。第三种:更复杂的拖拽排序,可用 Dnd 组件内的 DragDropContext, Droppable, Draggable,并参考 react-beautiful-dnd。 如要实现更复杂的拖拽排序,可使用第三种方法

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-dnd
$ cd bee-dnd
$ npm install
$ npm run dev

Current Tags

  • 2.0.1-alpha.0                                ...           alpha (a year ago)
  • 3.0.0                                ...           latest (6 months ago)

27 Versions

  • 3.0.0                                ...           6 months ago
  • 2.0.1                                ...           6 months ago
  • 2.0.1-alpha.0                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.1.5                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.3-alpha.0                                ...           a year ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           3 years ago
  • 0.1.9                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.1.8                                ...           3 years ago
  • 0.1.7                                ...           3 years ago
  • 0.1.6                                ...           3 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
Downloads
Today 0
This Week 81
This Month 893
Last Day 81
Last Week 611
Last Month 2,762
Dependencies (7)
Dev Dependencies (13)

Copyright 2014 - 2016 © taobao.org |