# html-drag
**Repository Path**: roman_123/html-drag
## Basic Information
- **Project Name**: html-drag
- **Description**: 一个可以快速实现html元素鼠标拖拽的工具。
A tool for dragging html dialog element easily。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-11-30
- **Last Updated**: 2023-06-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# html-drag
 [](https://gitee.com/roman_123/html-drag/tree/master) [](https://www.npmjs.com/package/html-drag) [](http://roman_123.gitee.io/html-drag/)
> A tool for dragging html dialog element easily
## Preview
**[example|示例](http://roman_123.gitee.io/html-drag/example.html)**
**[example code|示例代码](https://gitee.com/roman_123/html-drag/blob/master/example.html)**
## Setup
### Node
```shell
npm install --save html-drag
```
### Browser
```html
```
## Usage
You can then use it as a window global or as an CommonJs module
```js
// plain javascript in browser
Dragger.dragHtml(opt)
// commonJs
const { dragHtml } = require('html-drag')
// es6 module 使用ES6模块，需要在项目中集成webpack等打包工具
/**
* If you want to use this library by esm, you must ensure that your project
* has used webpack, vite, rollup or other packaging tools.
*/
import { dragHtml } from 'html-drag'
// option
const opt = {
// html element's anchor to be dragged 拖拽的锚点
anchorTarget: Header,
// html element to be dragged 拖拽时移动的元素
draggedTarget: Panel,
// anchor cursor style 锚点的鼠标样式(可选配置，默认值为'default')
anchorCursorStyle?: 'move',
// mouse style in dragging 拖拽时的鼠标样式(可选配置，默认值为'default')
cursorStyle?: 'move',
// 坐标轴限制, 当为'x', 'y', 'xy'时，限制在该轴上拖动, 默认不限制
limitAxis: '',
/**
* open parent container boundary limit
* 是否开启父容器的边界限制（可选配置，默认值为true）
*/
isOpenBoundary?: true,
// whether touch is supported 是否支持触摸（可选配置，默认值为true）
isOpenTouch?: true,
// 是否在捕获阶段执行鼠标移动和弹起事件,开启后事件不会向下传递,默认为false
// 当鼠标移动受其他元素影响时,设置为true
isUseCapture?: false,
// callback function when dragging 拖动时的回调函数（可选配置）
onDrag?: (left, top, dx, dy) => {
// 不返回任何值，仅在拖动时执行
// 返回false时，被拖动元素的位置将不发生改变
// 该函数可以返回一个左、上距离的数组,对拖动过程中的拖动范围做进一步限制,单位为px
if(left < 20) {
left = 20
} else if(left > 80) {
left = 80
}
if(top < 20) {
top = 20
} else if(top > 80) {
top = 80
}
return [left, top]
},
// 拖动开始时的回调函数（可选配置）
onDragStart: () => {
console.log('drag start!')
},
// 拖动结束时的回调函数（可选配置）
onDragEnd: () => {
console.log('drag end!')
}
}
// Use dragHtml to make html element draggable
const destroyEvent = dragHtml(opt)
// Return value
// Return a function to destroy dragging after calling
destroyEvent()
```
## Example
### Html
```html
```
### Vue
```vue
// 在vue中使用
```