JS函数封装实现控件拖拽
js脚本
export function dragBox(drag, wrap) {
// 用于获取父容器的样式属性值
function getCss(ele, prop) {
// getComputedStyle返回值是带单位的字符串,所以得parseInt
return parseInt(window.getComputedStyle(ele)[prop]);
}
// 鼠标点击位置的屏幕x,y坐标
let initX;
let initY;
// 父容器的屏幕x,y坐标
let wrapLeft;
let wrapRight;
// 用于判断鼠标按住与松开
let dragable = false;
// 给子容器绑定mousedown事件
drag.addEventListener(
"mousedown",
function (e) {
dragable = true;
wrapLeft = getCss(wrap, "left");
wrapRight = getCss(wrap, "top");
initX = e.clientX;
initY = e.clientY;
},
false
);
// 给子容器绑定mouseup事件
drag.addEventListener(
"mouseup",
function (e) {
dragable = false;
},
false
);
// 页面绑定mousemove事件
document.addEventListener("mousemove", function (e) {
if (dragable === true) {
let nowX = e.clientX;
let nowY = e.clientY;
let disX = nowX - initX;
let disY = nowY - initY;
wrap.style.left = wrapLeft + disX + "px";
wrap.style.top = wrapRight + disY + "px";
}
});
}
vue页面使用
<template>
<div id="father">
<div id="son"/>
......
</div>
</template>
<script>
import { dragBox } from '@/utils/controls'
export default {
.....
mounted(){
this.$nextTick(()=>{
dragBox(document.querySelector('.son'),document.querySelector('#father'))
})
},
......
}
</script>
<style>
#father{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 15px;
#son{
cursor: move;
}
......
}
</style>
注意这里的函数会形成闭包,变量会一直保存在内存