标题1.复习鼠标相关的事件类型
onclick : 鼠标单击 (鼠标按下+松开单击一次)
ondblclick : 鼠标双击
onmouseover :鼠标移入
onmouseout :鼠标移出
onmousemove : 鼠标移动
onmousedown : 鼠标按下
onmouseup : 鼠标松开
2.拖拽事件 : 三个流程
(1)拖拽开始 : 鼠标按下 事件
* 元素.onmousedown
(2)正在拖拽 : 鼠标移动 事件
* window.onmousemove
* 注意点 : a. 给window注册 b.需要在按下的事件处理函数中注册
(3)拖拽结束 : 鼠标松开 事件
* 元素.onmouseup
* 清除鼠标移动事件 : window.onmousemove = null
标题 3.盒子拖拽思路
//1. 获取元素
var son = document.querySelector('#son');//拖拽子元素
var father = document.querySelector('#father');//移动父元素
//2.注册事件
// son.onclick = function(){
// console.log('鼠标按下+松开,单击一次');
// };
//2.拖拽事件三个流程
//2.1 鼠标按下
son.onmousedown = function (e) {
// 1级链 : e: 鼠标按下的
//第一步:求蓝线距离 = 红线(鼠标按下e.pageX) - 绿线(father.offsetLeft)
var x = e.pageX - father.offsetLeft;
var y = e.pageY - father.offsetTop;
console.log(x,y);
//2.2 鼠标移动 : 页面移动
window.onmousemove = function (e) {
//二级链 :e : 鼠标移动
console.log(e);
//第二步 : 求黑线距离 = 红线(鼠标移动e.pageX) - 蓝色
/* 注意点 : 蓝线和黑线是两根线,需要两个不同变量来存储(千万不要覆盖蓝线x) */
var x1 = e.pageX - x;
var y1 = e.pageY - y;
/*注意点:如果元素有margin,则会产生顿闪
分析问题 :元素的定位 是参考 margin左上角
解决问题 :如果元素有margin,则需要减去margin
*/
father.style.left = x1 - 50 + 'px';
father.style.top = y1 - 50 +'px';
};
//2.3 鼠标松开 : 结束拖拽
//鼠标松开前提是 :鼠标要先按下。 所以这个松开事件可以在按下之后注册
son.onmouseup = function () {
//清除鼠标移动事件
//原理 : 利用变量赋值特点,先回收旧值,然后存入新值。
//第三步 : 鼠标松开之后,移除页面的移动事件
window.onmousemove = null;
};
};