https://github.com/kuangpf/react-layout-drag

布局拖拽，用于改变元素在屏幕中的位置。
https://github.com/kuangpf/react-layout-drag

drag layout react

Last synced: 26 days ago
JSON representation

布局拖拽，用于改变元素在屏幕中的位置。

• Host: GitHub
• URL: https://github.com/kuangpf/react-layout-drag
• Owner: KuangPF
• Created: 2020-06-28T14:34:17.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-14T13:35:09.000Z (over 1 year ago)
• Last Synced: 2024-04-24T18:09:07.812Z (7 months ago)
• Topics: drag, layout, react
• Language: TypeScript
• Homepage: https://kuangpf.com/react-layout-drag/
• Size: 1.22 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-layout-drag

[![NPM](https://img.shields.io/npm/v/react-layout-drag.svg)](https://www.npmjs.com/package/react-layout-drag) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)

布局拖拽，用于改变元素在屏幕中的位置。[demo](https://kuangpf.com/react-layout-drag/)

## Install

```bash

npm install react-layout-drag

# or

yarn add react-layout-drag

```

## Use

```tsx

import ReactLayoutDrag from 'react-layout-drag'

const App = () => {

  return (

    

      
children content

    

  )

}

```


## Props

#### id

* 说明：拖拽外层元素 id，用于获取该元素 DOM 结构

* 类型：`String`

* 是否必填：否

* 默认值：`react-layout-drag-wrap`

#### dragRange

* 说明：元素拖动范围，以 box 左上角为基准，默认在屏幕范围内拖动，值是长度为 4 的数组，范围依次为：上，右，下，左。

* 类型：`Array`

* 是否必填：否

* 默认值：--

#### className

* 外层元素 className，可以用于自定义外层元素样式

* 类型：`String`

* 是否必填：否

* 默认值：--

## License

MIT © [KuangPF](https://github.com/KuangPF)