A tool for dragging html dialog element easily
npm install --save html-drag
<script src="./dist/html-drag.min.js"></script>
You can then use it as a window global or as an CommonJs module
// 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()
<body>
<div id="Panel">
<div id="PanelHeader">header</div>
<div>content</div>
</div>
<script>
const Panel = document.getElementById('Panel')
const Header = document.getElementById('PanelHeader')
Dragger.dragHtml({
anchorTarget: Header,
draggedTarget: Panel,
cursorStyle: 'move',
})
</script>
</body>
// 在vue中使用
<template>
<div ref='Panel'>
<div ref='PanelHeader'>header</div>
<div>content</div>
</div>
</template>
<script>
import { dragHtml } from 'html-drag'
let dragEvent
mounted() {
dragEvent = dragHtml({
anchorTarget: this.$refs.PanelHeader,
draggedTarget: this.$refs.Panel,
cursorStyle: 'move'
})
},
beforeDestroy() {
if (dragEvent) {
dragEvent()
}
}
</script>
FAQs
A tool for dragging html dialog element easily
The npm package html-drag receives a total of 1 weekly downloads. As such, html-drag popularity was classified as not popular.
We found that html-drag demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.