题目:用原生js动态创建一个div,大小随意,挂在body上,实现鼠标拖拽效果
需要用到的鼠标事件:
1.鼠标按下(onmousedown),
2.鼠标移动(onmousemove)
3.鼠标抬起(onmouseup)
第一步:创建容器(每个页面,最大的容器是body对象,所有dom对象创建后默认都会放到body)
第二步,创建div,并设置宽高,背景颜色,设置绝对定位
第三步:将创建的div添加到容器中(注意先添加到容器,再去找div的DOM对象,不然找不到)
第四步,获取到div的DOM对象,用document.getElementById("");
第五步,给div添加鼠标事件,鼠标按下时触发鼠标点击事件,同时鼠标按下并移动,触发鼠标移动事件(注意移动时不超过浏览器范围),鼠标抬起,取消鼠标按下事件和鼠标移动事件。
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--题目:动态创建一个div,大小随意,挂在body上,实现鼠标拖拽效果-->
<!--需要用到的鼠标事件:鼠标按下(onmousedown),鼠标移动(onmousemove)和鼠标抬起(onmouseup)-->
<script type="text/javascript">
//创建容器
let container = document.body;
//创建div
let div = document.createElement("div");
//给div设置宽高、背景颜色、id
div.style.width="200px";
div.style.height="200px";
div.style.backgroundColor="yellow";
div.id="box";
//绝对定位
div.style.position = "absolute";
//将创建的div添加到容器中
container.appendChild(div);
//获取到box
let box=document.getElementById("box");
//为box绑定一个鼠标按下事件
box.onmousedown=function(event){
event=event||window.event;//解决浏览器兼容问题
//div的左偏移量=鼠标.clientX-元素.ofsetLeft
let boxLeft=event.clientX-box.offsetLeft;
//div的上偏移量=鼠标.clientY-元素.ofsetTop
let boxTop=event.clientY-box.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove=function(event){
event=event||window.event;//解决浏览器兼容问题
//获取鼠标的坐标
let left=event.clientX-boxLeft;
let top=event.clientY-boxTop;
//盒子移动的最大偏移量=浏览器宽度-盒子宽度
let moveLeft=document.documentElement.clientWidth-box.offsetWidth;
let moveTop=document.documentElement.clientHeight-box.offsetHeight;
//让盒子不超出浏览器范围
if(left<=0){
left=0;
}
else if(left>moveLeft){
left=moveLeft;
}
else{
box.style.left=left+"px";
}
if(top<=0){
top=0;
}
else if(top>moveTop){
top=moveTop;
}
else{
box.style.top=top+"px";
}
};
//为document绑定一个鼠标抬起事件,鼠标松开时,将box固定在当前位置
document.onmouseup=function(){
//取消document的onmousemove事件
document.onmousemove=null;
//取消document的onmouseup事件
document.onmouseup=null;
};
};
</script>
</body>
</html>
看看效果叭:文章来源:https://www.toymoban.com/news/detail-539584.html
拖拽div文章来源地址https://www.toymoban.com/news/detail-539584.html
到了这里,关于JS创建DIV,实现鼠标拖拽效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!