本项目已在 Github 开源（ele-drag）。
预览地址：https://oyps.github.io/ele-drag/
使用方法
- 使用
<script src="script.js">导入库文件（CDN 地址） 增加拖拽功能，
.move是需要拖拽的元素const ele = document.querySelector('.move') new EleDrag(ele, window, true)- 说明：需要为被拖拽元素设置宽度，否则元素移动到最右边时，页面可能出现水平滚动条
构造方法
/**
* @param target 被拖拽元素
* @param view 被拖拽元素在容器中移动
* @param limitOut 是否禁止元素超出容器
*/
constructor(
target: HTMLElement,
view: HTMLElement | Window = window,
limitOut: boolean = true
)库文件代码（TS）
/**
* 拖拽移动元素
* @author 欧阳鹏
* @version 1.0.2
* @link https://apee.top
*/
class EleDrag implements IConfig {
target: HTMLElement
view?: HTMLElement | Window
limitOut?: boolean
/** 被拖拽元素起始左边距 */
startOffsetLeft: number
/** 被拖拽元素起始顶边距 */
startOffsetTop: number
/** 鼠标起始 X 值 */
startMouseX: number
/** 鼠标起始 Y 值 */
startMouseY: number
/** 鼠标是否在被拖拽元素按下 */
isMouseDown: boolean
/**
* @param target 被拖拽元素
* @param view 被拖拽元素在容器中移动
* @param limitOut 是否禁止元素超出容器
*/
constructor(
target: HTMLElement,
view: HTMLElement | Window = window,
limitOut: boolean = true
) {
this.view = (view || window) as HTMLElement
this.target = target
this.limitOut = limitOut
this.target.style.position = 'absolute'
this.target.style.left = this.target.offsetLeft + 'px'
this.target.style.top = this.target.offsetTop + 'px'
this.target.style.margin = '0'
this.target.style.userSelect = 'none'
this.target.addEventListener('mousedown', (event) => {
this.startOffsetLeft = this.target.offsetLeft
this.startOffsetTop = this.target.offsetTop
this.startMouseX = event.pageX
this.startMouseY = event.pageY
this.isMouseDown = true
})
this.view.addEventListener('mouseup', (event) => {
this.isMouseDown = false
})
this.view.addEventListener('mousemove', (event) => {
if (this.isMouseDown) {
this.target.style.left = this.startOffsetLeft - this.startMouseX + event.clientX + 'px'
this.target.style.top = this.startOffsetTop - this.startMouseY + event.clientY + 'px'
if (this.limitOut) {
this.limitMoveOut()
}
}
})
this.view.addEventListener('resize', (event) => {
if (this.limitOut) {
this.limitMoveOut()
}
})
}
/** 禁止元素超出容器 */
limitMoveOut() {
if (this.target.offsetLeft < 1) {
this.target.style.left = '1px'
}
if (this.target.offsetTop < 1) {
this.target.style.top = '1px'
}
let maxLeft: number, maxTop: number
if ((this.view as HTMLElement).tagName) {
maxLeft = (this.view as HTMLElement).offsetWidth - this.target.offsetWidth - 1
maxTop = (this.view as HTMLElement).offsetHeight - this.target.offsetHeight - 1
} else {
maxLeft = window.innerWidth - this.target.offsetWidth - 1
maxTop = window.innerHeight - this.target.offsetHeight - 1
}
if (this.target.offsetLeft > maxLeft) {
this.target.style.left = maxLeft + 'px'
}
if (this.target.offsetTop > maxTop) {
this.target.style.top = maxTop + 'px'
}
}
}
/** 配置 */
interface IConfig {
/** 被拖拽元素 */
target: HTMLElement,
/** 被拖拽元素在容器中移动 */
view?: HTMLElement | Window,
/** 是否禁止元素超出容器 */
limitOut?: boolean
}示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素拖拽修改位置</title>
<style>
.move {
font-size: 30px;
width: 300px;
padding: 20px 0;
}
</style>
</head>
<body>
<button class="move">拖拽我看看</button>
<script src="./index.js"></script>
<script>
const ele = document.querySelector('.move')
new EleDrag(ele, window, true)
</script>
</body>
</html>