庆阳手机网站设计,杨凌做网站网址,如何查企业做网站是否备案过,租好服务器咋做网站呢本文实例为大家分享了js实现限定区域范围拖拉拽的具体代码#xff0c;供大家参考#xff0c;具体内容如下需要在范围内拖拉拽#xff0c;之前看来许多资料觉得都不是特别满足要求#xff0c;今天自己写了一个#xff0c;通过监听鼠标按下、鼠标抬起、鼠标移动事件来控制代…本文实例为大家分享了js实现限定区域范围拖拉拽的具体代码供大家参考具体内容如下需要在范围内拖拉拽之前看来许多资料觉得都不是特别满足要求今天自己写了一个通过监听鼠标按下、鼠标抬起、鼠标移动事件来控制代码如下Document#drag {background: aqua;width: 200px;height: 200px;position: absolute;-moz-user-select: none;-khtml-user-select: none;user-select: none;}#parent {position: relative;background: #cde4dc;height: 80vh;overflow: hidden;}这是一个测试//自执行函数,需要拖拽的元素需要设置position:absolute,父元素position:relative//有传父亲节点、若无则默认body为父节点((parent, children, mouseType) {if (!children) return;let childrenDiv document.querySelector(children);childrenDiv.style.position absolute;let parentDiv parent? document.querySelector(parent): document.querySelector(body);let isDown false;let x,y,l,t 0;childrenDiv.onmousedown function (e) {x e.clientX;y e.clientY;// 获取左部和底部的偏移量l childrenDiv.offsetLeft;t childrenDiv.offsetTop;isDown true;childrenDiv.style.cursor mouseType || move;};// 鼠标移动window.onmousemove function (e) {if (!isDown) {return;}//获取移动后的x和y坐标let nx e.clientX;let ny e.clientY;//获取父元素的宽高let parentWidth parentDiv.clientWidth;let parentHeight parentDiv.clientHeight;//获取子元素的宽高let childrenWidth childrenDiv.clientWidth;let childrenHight childrenDiv.clientHeight;// 计算移动后的左偏移量和顶部偏移量let nLeft nx - (x - l);let nTop ny - (y - t);let nRight nLeft childrenWidth;let nBottom nTop childrenHight;nLeft nLeft 0 ? 0 : nLeft; //判断左边距离是否越界nTop nTop 0 ? 0 : nTop; //判断上边距离是否越界//判断右边距离大于父元素宽度if (nRight parentWidth) {nLeft parentWidth - childrenHight;}// 判断下边界是否越界if (nBottom parentHeight) nTop parentHeight - childrenHight;childrenDiv.style.left nLeft px;childrenDiv.style.top nTop px;};// 鼠标抬起事件document.onmouseup function (e) {//鼠标抬起isDown false;childrenDiv.style.cursor default;};})(#parent, #drag, move);以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家。
