在建立的HTML 页面中 鼠标 拖拽 盒子 于任意位置 拖拽
可知 我们需要使用到 鼠标事件 div 定位 问题 页面中 鼠标坐标距离上 左 距离的计算
首先第一步 先实现 DIV 于页面中
*{
padding:0;
margin:0;
}
#app{
background: #ccc;
width: 200px;
height: 200px;
position: absolute;
}
代码格式如上 因为要使用绝对定位 来确定div 位置 所以提前声明
写之前需要声明一下 与之有关的鼠标事件
鼠标点击 以及鼠标点击 之后 移动 移动完之后 鼠标移开
分别是三个时间 mousedown mousemove mouseup
可以检测这三个事件的先后顺序如下
结果如下
由此可知 顺序为 mousedown -> mousemove -> mouseup
具体操作需写在mouseover事件里
在script 区域中 代码如下
<script>
var app = document.getElementById('app');
window.onmouseover = function () {
app.style.left = e.pageX +'px'
app.style.top = e.pageY +'px'
}
</script>
虽然这样写 已经基本完成了 但是 有个问题 div 总是出现在鼠标右下角
如果我想 鼠标放在盒子里面 又要如下操作
整体 声明 x y 变量 便于计算 盒子 离上 左 的 绝对距离
声明一个flag 为 false
var app = document.getElementById('app');
let Move = false; var x , y
window.onmouseover = function (){
console.log('over')
}
window.onmouseup = function(){
console.log('up')
Move = false
}
window.onmousedown = function(e){
console.log('down')
x = e.pageX - app.offsetLeft
y = e.pageY - app.offsetTop
Move = true
}
window.onmousemove = function(e){
console.log('move ')
e.preventDefault();
if( Move ) {
console.log('move')
app.style.left = e.pageX - x +'px'
app.style.top = e.pageY - y +'px'
}
}
在down 事件内 改 move 为 true 并记录下 鼠标 距离盒子的距离
move 事件中 实时记录 距离
如此 up 事件后 改 move 为 false 关闭此次事件