# el-dragmove

> drag move element.

Latest version **0.0.3** (published 2023-08-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install el-dragmove
pnpm add el-dragmove
yarn add el-dragmove
bun add el-dragmove
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2023-08-30 |
| First published | 2022-11-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | AlanLee |
| Maintainers | alanlee97 |
| Keywords | drag, dragmove, dragmove element, move |

## Links

- npm: https://www.npmjs.com/package/el-dragmove
- Repository: https://github.com/AlanLee97/el-dragmove
- Homepage: https://github.com/AlanLee97/el-dragmove#readme
- Issues: https://github.com/AlanLee97/el-dragmove/issues
- npm.io page: https://npm.io/package/el-dragmove

## Recent versions

- 0.0.3 (latest) — 2023-08-30
- 0.0.2-dev.1 — 2023-08-30
- 0.0.2-beta.3 — 2022-11-16
- 0.0.2-beta.2 — 2022-11-16
- 0.0.2-beta — 2022-11-15
- 0.0.2 — 2022-11-15
- 0.0.1 — 2022-11-13

## README

# 使用文档 | Usage

![拖动模型.gif](https://cdn.nlark.com/yuque/0/2022/gif/743297/1667698967145-6341c3a8-58d6-4225-8cd1-7c02178cf863.gif#averageHue=%23d9d8d8&clientId=u4ef5f103-1e0f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=883&id=ue204ed0f&margin=%5Bobject%20Object%5D&name=%E6%8B%96%E5%8A%A8%E6%A8%A1%E5%9E%8B.gif&originHeight=883&originWidth=1344&originalType=binary&ratio=1&rotation=0&showTitle=false&size=481399&status=done&style=none&taskId=u02d99430-12c9-4114-ae9f-fc5605ed464&title=&width=1344#averageHue=%23d9d8d8&crop=0&crop=0&crop=1&crop=1&id=xwaSU&originHeight=883&originWidth=1344&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)

## 在线demo | Online Demo

- PC👉 [PC Online Demo](https://unpkg.com/el-dragmove@latest/example/index.html)
- H5👉 [H5 Online Demo](https://unpkg.com/el-dragmove@latest/example/h5.html)

## 使用示例
### CDN方式使用 | Using with CDN
```html
<div id="rect-1" class="rect">1</div>

<script src="https://unpkg.com/el-dragmove@latest/dist/index.min.js"></script>
<script>
  const targetEl = document.getElementById('rect-1')
  const moveModel = new DragMoveModel({ targetEl: targetEl }, (x, y, z) => console.log(x, y, z))
</script>
```

### 模块化项目中使用 | Using in Project

1. 安装 | install
```bash
npm i el-dragmove@latest -S
```

2. 引入 | import el-dragmove
```javascript
import Dragmove from 'el-dragmove/dist/es'

const el = document.getElementById('test')
const elDragmove = new Dragmove({
  targetEl: el
})

// 销毁监听事件
// elDragmove.destroy()
```
## 构造函数初始化参数 | Initialize some parameters

- config，个性化配置
- callback， 回调函数，获取鼠标移动距离

### config参数配置 | config`s properties
| 属性 property | 说明 description | 类型 type | 默认值 defalut | 可选值 optional |
| --- | --- | --- | --- | --- |
| targetEl | 目标元素，需要拖动的元素<br>The element that needs to be dragged | HTMLElement | document.body |  |
| limitMoveBorder | 是否限制拖动边界<br>Whether to restrict drag boundaries | Boolean | false |  |
| moveMode | 拖动实现方式，transform为transform-translate方式移动，position为top,left方式移动<br>Drag implementation | String | transform |`transform`,`position` |
| h5 | 是否是h5<br>Whether it is H5 or not | Boolean | false |  |
| disableMoveEl | 是否限制移动<br>Whether to restrict movement | Boolean | false |  |
| maxMoveX | x轴最大移动距离<br>Maximum distance traveled on the x-axis | Number | 1000000 |  |
| maxMoveY | y轴最大移动距离<br>Maximum distance traveled on the y-axis | Number | 1000000 |  |


## 销毁方法 | Destroy

```javascript
moveModel.destroy()
```

# 实现原理解析 | How to implement
[https://juejin.cn/post/7165405623725588493](https://juejin.cn/post/7165405623725588493)

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