# react-draggable-and-droppable

> react drag and drop component

Latest version **1.0.2** (published 2018-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-draggable-and-droppable
pnpm add react-draggable-and-droppable
yarn add react-draggable-and-droppable
bun add react-draggable-and-droppable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-12-28 |
| First published | 2018-12-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 23.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Friday |
| Maintainers | wait-hua |
| Keywords | react, drag, drop |

## Links

- npm: https://www.npmjs.com/package/react-draggable-and-droppable
- Repository: https://github.com/wait-hua/react-draggable-and-droppable
- Homepage: https://github.com/wait-hua/react-draggable-and-droppable#readme
- Issues: https://github.com/wait-hua/react-draggable-and-droppable/issuess
- npm.io page: https://npm.io/package/react-draggable-and-droppable

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.7.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.7.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-12-28
- 1.0.1 — 2018-12-24
- 1.0.0 — 2018-12-24

## README

# Drag and Drop 

## Install
```bash
npm install --save react-draggable-and-droppable
```

## Drag拖拽对象
目前采用组件组合模式。此模式拖拽的源元素并不会移动。

### example
```tsx
import { Draggable } from 'react-draggable-and-droppable';

<Draggable 
    value={'jch'}
    onDrag={this.onDrag}>
    <div>
        <p>jch</p>
    </div>
</Draggable>
```

### props
| Prop/Attr | Type | Default | isNeed |  Description |
| --------- | ---- | ------- | ------ |  ----------- |
| value | any | '' | yes | 拖拽过程触发的事件都会将该值返回，标记拖拽的元素。|
| proxy | string | 'clone' | no | 拖拽时显示跟随鼠标的代理元素，默认为克隆自身元素DOM,可设为'', 不显示代理元素。 |
| proxyClass | string | 'z-dragproxy' | no | 上面clone的代理元素，外层会默认加个'z-dragproxy' class，可自定义拖拽时代理元素样式，同时拖拽元素也有个'draggable-source'，可自定义拖拽时元素的样式 |
| disabled | boolean | false | no | 是否可拖拽 |
### Event

- onDragStart
- onDrag
- onDragEnd

目前提供这几个事件，param都会返回几个关键信息
- origin: 拖拽源，React Componet。
- value: 拖拽元素设置的props value的值。
- pageX: 鼠标位置
- pageY: 鼠标位置


## Drop放置对象

### example
```tsx
import { Droppable } from 'react-draggable-and-droppable';

<Droppable onDrop={this.onDrop}>
    <div style={{width: '200px', height: '200px', background: 'red'}}>
        <p>放置拖拽元素区域</p>
    </div>
</Droppable>
```

### Event

- onDragEnter
- onDragOver
- onDragLeave
- onDrop

目前提供这几个事件，param都会返回几个关键信息
- origin: 拖拽源对象，React Component
- target: 拖拽放置对象。React Component
- value: 拖拽源的value值。
- pageX: 放置时鼠标位置。
- pageY: 放置时鼠标位置。

---
_Source: https://npm.io/package/react-draggable-and-droppable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._