- PC👉 PC Online Demo
- H5👉 H5 Online Demo
<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>- 安装 | install
npm i el-dragmove@latest -S- 引入 | import el-dragmove
import Dragmove from 'el-dragmove/dist/es'
const el = document.getElementById('test')
const elDragmove = new Dragmove({
targetEl: el
})
// 销毁监听事件
// elDragmove.destroy()- config，个性化配置
- callback， 回调函数，获取鼠标移动距离
| 属性 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 | 是否是h5 Whether 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 |
moveModel.destroy()