思路:计算好边界值
注意事项:切记代码不要多写、少写甚至写错
div的拖拽
div在鼠标按下时跟随鼠标走
div变化的是left和top属性⭐⭐⭐
div要定位
鼠标按下:onmousedown
在哪按下:div上按下
鼠标移动:onmousemmove,
在哪移动:在文档上document
鼠标抬起:onmouseup
抬起做什么事?移除移动事件onmousemmove
样式css
<style type="text/css">
div{
width: 300px;
height: 250px;
background: red;
position: absolute;
}
</style>
样式 div正常样式
javascript事件调用
<script type="text/javascript">
//三个事件:
//onmousedown,onmousemmove,onmouseup
var div = document.querySelector("div");
div.onmousedown = function(eve){//按下事件
//鼠标按着不放
var e = eve || event;
//点击元素边框内侧
var x = e.offsetX; //获取未按动之前的x
var y = e.offsetY; //获取未按动之前的y
//文档上document移动
document.onmousemove = function(eve){//eve代表有一个onmousemove事件对象
var e = eve || event;
//边框+内容+margin+padding
var l = e.pageX - x; //var x = e.offsetX;
var t = e.pageY - y; //var y = e.offsetY;
//边界处理
//var maxL = window.innerWidth
var maxL = document.documentElement.clientWidth - 300;
var maxT = document.documentElement.clientHeight - 250;
//l如果小于0,l=0
//t如果小于0 t=0;
/*if(l < 0){
l = 0;
}else if(l >= maxL){
l = maxL;
}
if(t < 0){
t = 0;
}else if(t >= maxT){
t = maxT;
}*/
//简写成三目运算
l = l < 0 ? 0 : (l >= maxL ? maxL : l);
t = t < 0 ? 0 : (t >= maxT ? maxT : t);
//改变div的left和top
div.style.left = l + "px";
div.style.top = t + "px";
return false;//阻止默认文字选中行为⭐⭐⭐ 选中文字松开鼠标仍默认选中
}
//抬起 把移动清除
div.onmouseup = function(){
document.onmousemove = null;//清除掉
}
}
</script>