題目：用原生js動態(tài)創(chuàng)建一個div，大小隨意，掛在body上，實現(xiàn)鼠標拖拽效果
需要用到的鼠標事件：
1.鼠標按下（onmousedown），
2.鼠標移動（onmousemove）
3.鼠標抬起（onmouseup）
第一步：創(chuàng)建容器（每個頁面，最大的容器是body對象，所有dom對象創(chuàng)建后默認都會放到body）
第二步，創(chuàng)建div，并設置寬高，背景顏色，設置絕對定位
第三步：將創(chuàng)建的div添加到容器中（注意先添加到容器，再去找div的DOM對象，不然找不到）
第四步，獲取到div的DOM對象，用document.getElementById("");
第五步，給div添加鼠標事件，鼠標按下時觸發(fā)鼠標點擊事件，同時鼠標按下并移動，觸發(fā)鼠標移動事件（注意移動時不超過瀏覽器范圍），鼠標抬起，取消鼠標按下事件和鼠標移動事件。
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--題目：動態(tài)創(chuàng)建一個div，大小隨意，掛在body上，實現(xiàn)鼠標拖拽效果-->
<!--需要用到的鼠標事件：鼠標按下（onmousedown），鼠標移動（onmousemove）和鼠標抬起（onmouseup）-->
<script type="text/javascript">
//創(chuàng)建容器
let container = document.body;
//創(chuàng)建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";
//將創(chuàng)建的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>看看效果叭：文章來源：http://www.zghlxwxcb.cn/news/detail-539584.html
拖拽div文章來源地址http://www.zghlxwxcb.cn/news/detail-539584.html
到了這里，關于JS創(chuàng)建DIV，實現(xiàn)鼠標拖拽效果的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
