使用文档 | Usage

在线demo | Online Demo

• PC👉 PC Online Demo
• H5👉 H5 Online Demo

使用示例

CDN方式使用 | Using with CDN

<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

npm i el-dragmove@latest -S

2. 引入 | import el-dragmove

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 | 目标元素，需要拖动的元素The element that needs to be dragged | HTMLElement | document.body | | | limitMoveBorder | 是否限制拖动边界Whether to restrict drag boundaries | Boolean | false | | | moveMode | 拖动实现方式，transform为transform-translate方式移动，position为top,left方式移动Drag implementation | String | transform |transform,position | | h5 | 是否是h5Whether it is H5 or not | Boolean | false | | | disableMoveEl | 是否限制移动Whether to restrict movement | Boolean | false | | | maxMoveX | x轴最大移动距离Maximum distance traveled on the x-axis | Number | 1000000 | | | maxMoveY | y轴最大移动距离Maximum distance traveled on the y-axis | Number | 1000000 | |

销毁方法 | Destroy

moveModel.destroy()

实现原理解析 | How to implement

https://juejin.cn/post/7165405623725588493