# react-drag-dom

> Quickly drag and drop page elements

Latest version **1.0.8** (published 2020-12-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-drag-dom
pnpm add react-drag-dom
yarn add react-drag-dom
bun add react-drag-dom
```

## 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.8 |
| Published | 2020-12-13 |
| First published | 2020-11-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | smile0125 |
| Maintainers | smile0125 |
| Keywords | Drag, Quickly, Multiple |

## Links

- npm: https://www.npmjs.com/package/react-drag-dom
- npm.io page: https://npm.io/package/react-drag-dom

## Recent versions

- 1.0.8 (latest) — 2020-12-13
- 1.0.7 — 2020-12-13
- 1.0.6 — 2020-12-13
- 1.0.5 — 2020-12-02
- 1.0.4 — 2020-12-01
- 1.0.3 — 2020-12-01
- 1.0.2 — 2020-12-01
- 1.0.1 — 2020-11-06
- 1.0.0 — 2020-11-02

## README

# react-drag-dom

# Installing

```
npm i react-drag-dom
```

# Example

```
import React from 'react';
import { Drag } from 'react-drag-dom';
class FirstPage extends React.Component {
    componentDidMount() {
        const target1 = this.drag1;
        const target2 = this.drag2;
        let targets = [target1, target2]
        const s = new Drag({ targets, isExcess: true, defaultZIndex: 600 });
        s.start();
    }
    render() {
        return (
            <div>
                <div
                    ref={div => this.drag1 = div}
                    style={{ width: '500px', height: '100px', position: 'absolute', background: 'gold' }}>
                        drag1
                </div>
                <div
                    ref={div => this.drag2 = div}
                    style={{ width: '500px', height: '100px', position: 'absolute', background: 'gold', top: '150px' }}>
                        drag2
                </div>
            </div>
        );
    }
};
export default FirstPage;
```

# Version

| Version | 支持                                                   |
| ------- | ------------------------------------------------------ |
| v1.0.0  | 支持页面**单个**元素快速拖动                           |
| v1.0.1  | 支持页面**多个**元素快速拖动                           |
| v1.0.2  | 优化                                                   |
| v1.0.3  | 优化                                                   |
| v1.0.4  | 新增 isExcess 字段：是否允许拖拽出窗口之外，默认 false |
| v1.0.5  | 新增 defaultZIndex 字段：浮动的层级，默认 1000         |
| v1.0.6  | 优化                                                   |
| v1.0.7  | 优化                                                   |

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