El-dragmove NPM

使用文档 | Usage

拖动模型.gif

在线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

安装 | 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()

构造函数初始化参数 | 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