封装鼠标拖拽
2022-04-07 本文已影响0人
你怀中的猫
1、拖拽插件的参数
| 参数 | 参数表示的意义 |
|---|---|
| el | 要被拖拽的对象 |
| dire | "x" , "y" 不传的时候两个方向都能拖拽 |
| dragStart | function(el,e) {} //监听拖拽开始 |
| dragging | function(el,e) {} //监听拖拽过程 |
| dragEnd | function(el,e) {} //监听拖拽结束 |
2、鼠标拖拽js代码
function drag(options) {
//接收传入的参数
var el = options.el; //必传
//方向
var dire = options.dire || "";
//监听方法
var dragStart = options.dragStart || "";
var dragging = options.dragging || "";
var dragEnd = options.dragEnd || "";
//1、给el绑定鼠标按下
el.addEventListener('mousedown', function (e) {
//获取鼠标在el中的位置
this._x = e.pageX - getEl2Dom(el, "Left");
this._y = e.pageY - getEl2Dom(el, "Top");
//获取当前被拖拽对象el的起始位置（为了保证拖拽后才触发
this._x0 = this.offsetLeft;
this._y0 = this.offsetTop;
//给document注册移动方法
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', mouseup)
//调用传递进来的dragStart
if (typeof dragStart == 'function') {
dragStart(el, e); //对外回调，拖拽开始
}
})
//2、给document绑定抬起事件处理函数
function mouseup(e) {
//拖拽结束后 鼠标移动事件处理函数
document.removeEventListener('mousemove', move);
//删除鼠标抬起处理函数
document.removeEventListener('mouseup', mouseup);
//为了保证一定是在拖拽之后执行，需要判断鼠标抬起时，盒子的位置是否
//发生变化，如果盒子位置没变化，就不执行
//1、获取抬起时盒子的位置
var xend = el.offsetLeft;
var yend = el.offsetTop;
if (el._x0 == xend && el._y0 == yend) return;
//回调外部传入的dragEnd
if (typeof dragEnd == 'function') {
dragEnd(el, e); //对外回调，当拖拽结束后
}
}
//3、移动过程
function move(e) {
//获取鼠标到被拖拽的对象，定位父级边界之间的距离
var x = e.pageX - getEl2Dom(el.offsetParent, "Left") - (el.offsetParent ? el.offsetParent.clientLeft : 0);
var y = e.pageY - getEl2Dom(el.offsetParent, "Top") - (el.offsetParent ? el.offsetParent.clientTop : 0);
//计算位置
var nowX = x - el._x;
var nowY = y - el._y;
//边界区域控制 X轴
var W = el.offsetParent ? el.offsetParent.clientWidth - el.offsetWidth :
document.documentElement.clientWidth - el.offsetWidth;
nowX = nowX < 0 ? 0 : nowX;
nowX = nowX > W ? W : nowX;
//Y轴
var H = el.offsetParent ? el.offsetParent.clientHeight - el.offsetHeight :
document.documentElement.clientHeight - el.offsetHeight;
nowY = nowY < 0 ? 0 : nowY;
nowY = nowY > H ? H : nowY;
//设置样式
if (dire != 'y') {
el.style.left = nowX + 'px';
}
if (dire != 'x') {
el.style.top = nowY + 'px';
}
//调用一下外部的回调函数
if (typeof dragging == 'function') {
dragging(el, e); //移动过程中不断调用外部的 dragging函数
}
}
//获取盒子到文档边界之间的距离()
function getEl2Dom(el, fx) {
if (el == null) return 0;
//获取当前盒子的左侧定位
var offsetLeft = el["offset" + fx];
//获取当前盒子的定位父级
var parent = el.offsetParent;
//获取父级的边框宽度
var clientLeft = parent ? parent["client" + fx] : 0;
return offsetLeft + clientLeft + getEl2Dom(el.offsetParent, fx)
}
}
3、鼠标拖拽示例
<!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>Document</title>
<style>
.wrap{
width: 500px;
height: 300px;
border: 1px solid red;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: sandybrown;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
<!-- 引入拖拽js代码 -->
<script src="./drag.js"></script>
<script>
drag({
el : document.querySelector('.box'),
dire : "x,y",
dragStart : function(el,e){
console.log("开始拖拽，第一次调用",el,e)
} ,
dragging : function(el,e){
console.log("拖拽过程",el.offsetLeft)
},
dragEnd : function(el,e){
console.log("拖拽结束",el,e)
}
})
</script>
</html>
