# partition-drag

> npm install partition-drag

Latest version **1.0.4** (published 2023-08-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install partition-drag
pnpm add partition-drag
yarn add partition-drag
bun add partition-drag
```

## 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.4 |
| Published | 2023-08-14 |
| First published | 2023-07-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 46.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | talangyufeng |

## Links

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

## Recent versions

- 1.0.4 (latest) — 2023-08-14
- 1.0.3 — 2023-08-04
- 1.0.2 — 2023-07-28
- 1.0.1 — 2023-07-28
- 1.0.0 — 2023-07-28

## README

# 分区拖拽组件,需要三个组件进行配合  

npm install partition-drag  

.支持左右拖动, 上下拖动,并且可以多个区域互相拖动,拖动不影响相邻的分区  
.最外层组件 partition-drag  
.子组件分割拖动线组件 partition-drag-line  
.子组件分区组件 partition-drag-block  

****

```
// 源码地址: https://gitee.com/gljy/partition-drag
import partitionDrag from 'partition-drag';  
const app = createApp(App);  
app.use(partitionDrag);  

import 'partition-drag/style.css' // 引入样式  

<partition-drag style="width: 100%;height: 100%;" flexDirection="row">
    <!-- 根据 flexDirection:row 横向排列 column竖向排列 确定 -->
    <!-- keyId必须要有,并且必须唯一 originalFlex的值加起来必须等于100 -->
    <!-- :minValue="200" :maxValue="500"限制最大宽度和最小宽度 单位 px -->
    <partition-drag-block :minValue="200" :maxValue="500" :originalFlex="20" keyId="one1">
    左侧1
    </partition-drag-block>
    <!-- partition-drag-line 属性 
        clickClose(点击关闭左侧或右侧div):默认为true  可选值 true | false false表示去掉此功能
        closeDirection(关闭左侧还是右侧div): 默认为left 可选值 left | right -->
    <partition-drag-line keyId="two2"></partition-drag-line>
    <partition-drag-block :originalFlex="20" keyId="three3">
    右侧--2
    </partition-drag-block>
    <partition-drag-line keyId="two4"></partition-drag-line>
    <partition-drag-block :originalFlex="20" keyId="three5">
    右侧-----3
    </partition-drag-block>
    <partition-drag-line keyId="two5"></partition-drag-line>
    <partition-drag-block :originalFlex="20" keyId="three6">
    右侧-----4
    </partition-drag-block>
    <partition-drag-line keyId="two7"></partition-drag-line>
    <partition-drag-block :originalFlex="20" keyId="three8">
    右侧-----5
    </partition-drag-block>
</partition-drag>
```
****
以下是图片
![Alt text](image-1.png)

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