JS实现元素拖拽，简单悬浮框实现

初学JavaScript，首次使用CSDN写博客，就当做自己的笔记本记录一下心得。

偶然了解到放大缩小拖拽这个功能，感兴趣就摸索着写了一个粗略的。实际功能还有许多问题和未优化的细节问题，仅作为学习练习参考，欢迎大佬指点

顶部图片：
主体部分图片（来自阿里巴巴矢量图表库–宝藏网站）：

HTML代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="css/flowstyle.css" /><title>悬浮窗</title></head><body><div class="box"><div class="upTuo"></div><div class="downShen"><div class="item" ><img class="it" draggable="false" src="img/儿童手绘-太阳.png" ><span id="it1"></span></div><div class="item" ><img class="it" draggable="false" src="img/儿童手绘-火箭.png" ><span id="it2"></span></div><div class="item" ><img class="it" draggable="false" src="img/儿童手绘-爱心.png" ><span id="it3"></span></div></div></div></body>
</html>

CSS代码

*{margin: 0;padding: 0;
}
body{background-color: burlywood;
}
.box{width: 50px;height: 148px;/* background-color: aqua; */position: relative;}
.upTuo{width: 50px;height: 50px;margin: 0 auto;background: url(../img/小小.png) no-repeat;background-size: cover;position: absolute;cursor: pointer;
}
.downShen{width: 50px;height: 100px;background-color: antiquewhite;border: solid black 2px;border-radius: 13%;box-sizing: border-box;position: absolute;top: 48px;cursor: pointer;
}.item{width: 46px;height: 32.3px;border: solid black 2px;border-radius: 13%;box-sizing: border-box;line-height: 32.3px;position: relative;
}
.item:hover{background-color: palegoldenrod;
}
.item img{position: absolute;width: 29px;height: 29px;left: 6.5px;
}
.item img:hover{width: 30px;height: 30px;
}.item span{position: relative;font-weight: 900;font-family: "comic sans ms";font-style: italic;color: salmon;text-shadow: 1px 1px 1px black;
}

JavaScript部分首先需要了解一些知识(深入了解自己去找资料）

function(event)可以返回事件属性
addEventListener 事件监听器
preventDefault()方法-----取消事件的默认动作。（缺少会出现拖拽卡顿之类的bug。

元素视图属性
clientX	返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口不包括自身的控件和滚动条。
clientX	返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的垂直坐标。客户区指的是当前窗口不包括自身的控件和滚动条。
offsetX	返回相对于带有定位的父盒子的 x 坐标，父元素均无定位则相对于窗口
offsetY	返回相对于带有定位的父盒子的 y 坐标，父元素均无定位则相对于窗口
screenX	返回鼠标点击位置距离当前电脑屏幕的 x 坐标
screenY	返回鼠标点击位置距离当前电脑屏幕的 y 坐标
offsetWidth	返回对象的padding+border+width属性值之和
offsetHeight	返回对象的padding+border+height属性值之和

windows视图属性
innerWidth	浏览器窗口可视区宽度（不含浏览器控制台、菜单栏、工具栏）
innerHeight	浏览器窗口可视区高度（不含浏览器控制台、菜单栏、工具栏）

多次试验后我采用 头部实现移动+主体实现放大缩小 这样简单一点

如果使用 **box移动放大缩小一体 **我尝试过 通过判断位置是否改变来隔离缩放click和移动时mousedown，mouseup的冲突但还是有点小问题解决不了，索性选择简单的思路写

box（悬浮框） 移动部分，首先在mousedown获取upTuo初始位置boxX，boxY和鼠标位置mouseX，mouseY，并
计算 x0 = mouseX - boxX 和 y0 = mouseY - boxY得到鼠标相对于upTuo距离，然后在mousemove部分重新获取鼠标位置（鼠标移动当前位置）再减去分别 x0 y0即可得到upTuo当前位置，紧接着需要设定悬浮框可移动范围为整个可视界面。最后使用preventDefault()方法取消事件的默认动作。

移动部分代码（仅供参考）

var changePosition = function(x, y) {box.style.left = x + "px";box.style.top = y + "px";
}upTuo.addEventListener("mousedown", mouseDown)
function mouseDown(e1) {// console.log("按下")boxX = box.offsetLeft;  boxY = box.offsetTop;// isMove.x1 = box.offsetLeft;  //box一体操作判断位置// isMove.y1 = box.offsetTop;// console.log(isMove.x1,isMove.y1,"初始位置")mouseX = e1.clientX;mouseY = e1.clientY;var x0 = mouseX - boxX; var y0 = mouseY - boxY; // console.log(boxX,boxY,mouseX,mouseY)document.addEventListener('mousemove',mouseMove)function mouseMove(e2){   // console.log("移动")upTuo.style.cursor = "move";var x = e2.clientX - x0;var y = e2.clientY - y0;if(x <= 0){x = 0;}if(x >= window.innerWidth - box.offsetWidth)//页面宽度-元素宽度{x = window.innerWidth - box.offsetWidth;// console.log(x)}if(y <= 0){y = 0;}if(y >= window.innerHeight - box.offsetHeight){y = window.innerHeight - box.offsetHeight;}changePosition(x,y);}document.addEventListener('mouseup',mouseUp)function mouseUp(){// console.log("松开")upTuo.style.cursor = "pointer";document.removeEventListener('mousemove',mouseMove);document.removeEventListener('mousedown',mouseDown);       }e1.preventDefault();// 取消掉与事件关联的默认动作！！！！！！！！重点！！！！！！！没有会出现bug！！
}

box（悬浮框） 缩放部分，可以用addEventListener写也可以用onmouseclick写，两种方法缩放触发时间不同分别在移动前后
采用 var isBig = false; 判断是否变大或缩小

addEventListener方法（没有写完仅提供思路）

box.addEventListener('click', toBig) //触发顺序--点击--按下--移动--开--console.log("点击")function toBig(){if(!isBig){changSize1();isBig = !isBig;}else{changSize2();isBig = !isBig;}}

onmouseclick方法
在缩放过程中需要考虑在右侧，下侧和右下角放大时会超出页面可视界面，在if–else嵌套中一定要先判断右下角，否则会出现冲突，此部分还存在问题未解决就是悬浮框不在边界接近边界放大时也会超出可视边界，浏览器缩放时不会随可视窗口移动（应该是边界计算问题），优化部分问题就是在边界缩小时不改变悬浮框位置还没解决

downShen.onclick = function toBig(e2){   //触发顺序---按下--移动--松开--点击--// console.log("点击")    if(!isBig){if((parseInt(box.style.top) >= window.innerHeight - box.offsetHeight) && (parseInt(box.style.left) >= window.innerWidth - box.offsetWidth)){// console.log("111")changSize1();box.style.top = window.innerHeight - box.offsetHeight + "px";box.style.left = window.innerWidth - box.offsetWidth + "px";console.log(box.style.top)}else if(parseInt(box.style.left) >= window.innerWidth - box.offsetWidth ){// console.log("222")changSize1();box.style.left = window.innerWidth - box.offsetWidth + "px";}else if(parseInt(box.style.top) >= window.innerHeight - box.offsetHeight ){// console.log("333")changSize1();box.style.top = window.innerHeight - box.offsetHeight + "px";}else{changSize1();}isBig = !isBig;}else{changSize2();isBig = !isBig;}
}

JavaScript完整代码

<script type="text/javascript">window.onload = function() {//------获取-----var box = document.getElementsByClassName('box')[0];var upTuo = document.getElementsByClassName('upTuo')[0];var downShen = document.getElementsByClassName('downShen')[0];var item = document.getElementsByClassName('item');var it = document.getElementsByClassName('it');var it1 = document.getElementById('it1');var it2 = document.getElementById('it2');var it3 = document.getElementById('it3');var mouseX, mouseY; //---鼠标位置var boxX , boxY; //-----悬浮框位置var isMove = {x1 : " ",y1 : " "}; //------是否移动（判断box位置是否改变，如果改变就是移动）var isBig = false; //-------是否变大//------位置改变函数-------var changePosition = function(x, y) {box.style.left = x + "px";box.style.top = y + "px";}//----------大小切换函数----------//-------变大时样式改变-------function changSize1(){box.style.width = 80 + "px";box.style.height = 208 + "px";downShen.style.width = 80 + "px";downShen.style.height = 130 + "px";upTuo.style.width = 80 + "px";upTuo.style.height = 80 + "px";downShen.style.top = 78 + 'px';for(var i = 0 ; i < item.length ; i++){item[i].style.width = 76 + "px";item[i].style.height = 42 + "px";it[i].style.left = "0px";it[i].style.top = "5px";}it1.innerHTML = "太阳";it1.style.left = "27px"it1.style.top = "2px"it2.innerHTML = "Hello!";it2.style.left = "27px"it2.style.top = "2px"it3.innerHTML = "留言";it3.style.left = "27px"it3.style.top = "2px"}//-----样式还原-------function changSize2(){box.style.width = 50 + "px";box.style.height = 148 + "px";downShen.style.width = 50 + "px";downShen.style.height = 100 + "px";upTuo.style.width = 50 + "px";upTuo.style.height = 50 + "px";downShen.style.top = 48 + 'px';for(var i = 0 ; i < item.length ; i++){item[i].style.width = 46 + "px";item[i].style.height = 32.3 + "px";it[i].style.left = "6.5px";it[i].style.top = "0px";}it1.innerHTML = " ";it2.innerHTML = " ";it3.innerHTML = " ";}//-----位置移动--------upTuo.addEventListener("mousedown", mouseDown)function mouseDown(e1) {// console.log("按下")boxX = box.offsetLeft;  boxY = box.offsetTop;// isMove.x1 = box.offsetLeft;  //box一体操作判断位置// isMove.y1 = box.offsetTop;// console.log(isMove.x1,isMove.y1,"初始位置")mouseX = e1.clientX;mouseY = e1.clientY;var x0 = mouseX - boxX; var y0 = mouseY - boxY; // console.log(boxX,boxY,mouseX,mouseY)document.addEventListener('mousemove',mouseMove)function mouseMove(e2){    // console.log("移动")upTuo.style.cursor = "move";var x = e2.clientX - x0;var y = e2.clientY - y0;if(x <= 0){x = 0;}if(x >= window.innerWidth - box.offsetWidth)//页面宽度-元素宽度{x = window.innerWidth - box.offsetWidth;// console.log(x)}if(y <= 0){y = 0;}if(y >= window.innerHeight - box.offsetHeight){y = window.innerHeight - box.offsetHeight;}changePosition(x,y);}document.addEventListener('mouseup',mouseUp)function mouseUp(){// console.log("松开")upTuo.style.cursor = "pointer";document.removeEventListener('mousemove',mouseMove);document.removeEventListener('mousedown',mouseDown);}e1.preventDefault();// 取消掉与事件关联的默认动作！！！！！！！！中点！！！！！！！没有会出现bug！！}//--------位置移动结束-------//---------大小切换------两种写法----//方法一未写完// box.addEventListener('click', toBig)   //触发顺序---点击--按下--移动--松开--// console.log("点击")// function toBig(){//  if(!isBig){//       changSize1();//         isBig = !isBig;//  }//     else{//         changSize2();//         isBig = !isBig;//  }// }//方法二  downShen.onclick = function toBig(e2){   //触发顺序---按下--移动--松开--点击--// console.log("点击")// if(isMove.x1 == box.offsetLeft && isMove.y1 == box.offsetTop){}if(!isBig){if((parseInt(box.style.top) >= window.innerHeight - box.offsetHeight) && (parseInt(box.style.left) >= window.innerWidth - box.offsetWidth)){// console.log("111")changSize1();box.style.top = window.innerHeight - box.offsetHeight + "px";box.style.left = window.innerWidth - box.offsetWidth + "px";console.log(box.style.top)}else if(parseInt(box.style.left) >= window.innerWidth - box.offsetWidth ){// console.log("222")changSize1();box.style.left = window.innerWidth - box.offsetWidth + "px";}else if(parseInt(box.style.top) >= window.innerHeight - box.offsetHeight ){// console.log("333")changSize1();box.style.top = window.innerHeight - box.offsetHeight + "px";}else{changSize1();}isBig = !isBig;}else{changSize2();isBig = !isBig;}}}
</script>

能力有限暂时写到这了。。。