首页 > 代码库 > 使用JS制作一个鼠标可拖的DIV（二）——限制区域移动
使用JS制作一个鼠标可拖的DIV（二）——限制区域移动
这次是要对上一篇的内容进行扩展。
由于需要对可拖动的 DIV 进行一个区域范围的限制，所以要给于一个容器，让可拖动的 DIV 元素不能逃出该容器的大小范围。
一、思路
1.在外层增加一个 DIV 容器，并设置好容器的大小。（即：宽和高）
当容器存在边框的时候，由于这里还没找到获取的方法，所以，在容器边框大于 0 的时候，获得的容器的限制区域的坐标会有误差。
为了避免这情况，可以在多加一次容器，有边框样式的在外层，无边框样子的在内层。
例：
<style> #mainContainer { border: 10px solid #990000; width: 600px; height: 300px; } #innerContainer { width: 100%; height: 100%; } #Drag { /*border: 5px solid #C4E3FD;*/ background: #C4E3FD; width: 50px; height: 50px; top: 50px; left: 50px; z-index: 2; } #Drag2 { /*border: 5px solid #C4E3FD;*/ background: #ff0000; width: 50px; height: 50px; top: 50px; left: 50px; z-index: 3; }</style><div id="mainContainer"> <div id="innerContainer"> <div id="Drag" onm ousedown="moveBind(this, event)">1</div> <div id="Drag2" onm ousedown="moveBind(this, event)">2</div> </div></div><br />拖放状态：<span id="idShow">未开始</span>
2.为了方便获得元素的位置和大小，先写一个方法来辅助（谷歌不能用了可恶orz，只能百度出这个方法并稍微做点修改）。
//获得元素的坐标与大小。 function findPosition(oElement) { var x2 = 0; var y2 = 0; var width = oElement.clientWidth; var height = oElement.clientHeight; //alert(width + "=" + height); if (typeof (oElement.offsetParent) != ‘undefined‘) { for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) { posX += oElement.offsetLeft; posY += oElement.offsetTop; } x2 = posX + width; y2 = posY + height; return [posX, posY, x2, y2, width, height]; } else { x2 = oElement.x + width; y2 = oElement.y + height; return [oElement.x, oElement.y, x2, y2, width, height]; } }
这里以数组的形式返回元素的 X 开始坐标和 Y 开始坐标，X 结束坐标和 Y 结束坐标，元素真实的宽与高（不算边框）
3.在鼠标按下事件里，先获得容器的位置数据：
//获得容器坐标。var container = findPosition(document.getElementById("innerContainer"));var containerLeft = container[0];var containerTop = container[1];var containerWidth = container[4];var containerHeight = container[5];
4.计算拖动 DIV 元素可移动的区域坐标：
/*计算出容器的范围坐标。*///开始 X 坐标。var startX = containerLeft;//开始 Y 坐标。var startY = containerTop;//结束 X 坐标。var maxX = startX + containerWidth - width;//结束 Y 坐标。var maxY = startY + containerHeight - height;
开始 X 坐标 = 容器的左上角 X 坐标。
开始 Y 坐标 = 容器的左上角 Y 坐标。
结束 X 坐标 = 开始 X 坐标 + 容器的宽度 - 拖动 DIV 元素的宽度
结束 Y 坐标 = 开始 Y 坐标 + 容器的高度 - 拖动 DIV 元素的高度
5.当区域内存在多个可拖动的 DIV 元素时，要把当前鼠标点击的那个 DIV 设置成置顶显示。
//获得最大 Z 坐标。 function getMaxIndex() { var index = 0; var ds = document.getElementById(‘innerContainer‘).getElementsByTagName(‘div‘); var length = document.getElementById(‘innerContainer‘).getElementsByTagName(‘div‘).length; for (var loop = 0; loop < length; loop++) { if (ds[loop].style.zIndex > index) index = ds[loop].style.zIndex; } return parseInt(index); }
该方法遍历容器内的所有 DIV 元素（即：可拖动元素），取得它们当中z-Index最大的值。
然后，设置点击元素的 z-Index 值：
//鼠标选中的元素设置成顶层。obj.style.zIndex = getMaxIndex() + 1;
/*******************以上方法是在鼠标按下事件里 onm ousedown ******************/
/*******************以下方法是在鼠标按下事件里 onm ousemove ******************/
6.在移动事件里，修改元素位置的外层加上如下这条件。
//不可以超出指定的范围。 if (moveLeft >= startX && moveTop >= startY && moveLeft <= maxX && moveTop <= maxY) { //当移动位置在范围内时，元素跟随鼠标移动。 obj.style.left = moveLeft + "px"; obj.style.top = moveTop + "px"; }
这条件表示：移动的位置在容器范围内时，元素才可以跟随鼠标移动。
但是，现在这样的做法，当鼠标快速拖出容器区域时，元素就会停止不动，但并没有移动到最边界，同时，鼠标在区域外并没有放开按键，移动鼠标时元素并不会跟着移动。
解决的思路是：
（1）当元素水平（X坐标）移动的位置没有达到或超出容器限制区域的 X 坐标区域时。
继续修改拖动元素的 X 坐标位置。
（2）当元素水平（X坐标）移动的位置超出容器限制区域的最大 X 坐标（即：容器右下角的 X 坐标）区域时（即：限制区域的右边），将元素的 X 坐标设置成最大 X 坐标值。
if (moveLeft >= startX && moveLeft <= maxX) { obj.style.left = moveLeft + "px"; } else if (moveLeft > maxX) { obj.style.left = maxX + "px"; }
（3）当元素水平（X坐标）移动的位置小于容器限制区域的开始 X 坐标（即：容器左上角的 X 坐标）区域时（即：限制区域的左边），将元素的 X 坐标设置成最小 X 坐标值。
if (moveLeft >= startX && moveLeft <= maxX) { obj.style.left = moveLeft + "px"; } else if (moveLeft > maxX) { obj.style.left = maxX + "px"; } else if (moveLeft < startX) { obj.style.left = startX + "px"; }
（4）Y 坐标同以上（1）（2）（3）：
if (moveTop >= startY && moveTop <= maxY) { obj.style.top = moveTop + "px"; } else if (moveTop > maxY) { obj.style.top = maxY + "px"; } else if (moveTop < startY) { obj.style.top = startY + "px"; }
完成了！这时，鼠标拖动到区域外面时，元素同样会跟随鼠标的位置在容器内移动。
二、以下是完整源码：
JS部分：
//获得元素的坐标与大小。 function findPosition(oElement) { var x2 = 0; var y2 = 0; var width = oElement.clientWidth; var height = oElement.clientHeight; //alert(width + "=" + height); if (typeof (oElement.offsetParent) != ‘undefined‘) { for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) { posX += oElement.offsetLeft; posY += oElement.offsetTop; } x2 = posX + width; y2 = posY + height; return [posX, posY, x2, y2, width, height]; } else { x2 = oElement.x + width; y2 = oElement.y + height; return [oElement.x, oElement.y, x2, y2, width, height]; } } function moveBind(obj, evnt) { //获得元素坐标。 var left = obj.offsetLeft; var top = obj.offsetTop; var width = obj.offsetWidth; var height = obj.offsetHeight; //计算出鼠标的位置与元素位置的差值。 var cleft = evnt.clientX - left; var ctop = evnt.clientY - top; //获得容器坐标。 var container = findPosition(document.getElementById("innerContainer")); var containerLeft = container[0]; var containerTop = container[1]; var containerWidth = container[4]; var containerHeight = container[5]; /*计算出容器的范围坐标。*/ //开始 X 坐标。 var startX = containerLeft; //开始 Y 坐标。 var startY = containerTop; //结束 X 坐标。 var maxX = startX + containerWidth - width; //结束 Y 坐标。 var maxY = startY + containerHeight - height; //鼠标选中的元素设置成顶层。 obj.style.zIndex = getMaxIndex() + 1; //输出显示。 //show("idShow", startX, startY); document.onmousemove = function (doc) { //计算出移动后的坐标。 var moveLeft = doc.clientX - cleft; var moveTop = doc.clientY - ctop; //设置成绝对定位，让元素可以移动。 obj.style.position = "absolute"; //不可以超出指定的范围。 if (moveLeft >= startX && moveTop >= startY && moveLeft <= maxX && moveTop <= maxY) { //当移动位置在范围内时，元素跟随鼠标移动。 obj.style.left = moveLeft + "px"; obj.style.top = moveTop + "px"; } else { /****************以下为处理当鼠标的位置不在范围内里，鼠标的移动，里面的元素也要跟着移动*****************/ //向右移动时，如果移动坐标没有大于最大 X 坐标，则移动，否则设置成最大 X 坐标的值。 if (moveLeft >= startX && moveLeft <= maxX) { obj.style.left = moveLeft + "px"; } else if (moveLeft > maxX) { obj.style.left = maxX + "px"; } else if (moveLeft < startX) { obj.style.left = startX + "px"; } //向下移动时，如果移动坐标没有大于最大 Y 坐标，则移动，否则设置成最大 Y 坐标的值。 if (moveTop >= startY && moveTop <= maxY) { obj.style.top = moveTop + "px"; } else if (moveTop > maxY) { obj.style.top = maxY + "px"; } else if (moveTop < startY) { obj.style.top = startY + "px"; } } show("idShow", moveLeft, moveTop); } document.onmouseup = function () { document.onmousemove = function () { } }; } //获得最大 Z 坐标。 function getMaxIndex() { var index = 0; var ds = document.getElementById(‘innerContainer‘).getElementsByTagName(‘div‘); var length = document.getElementById(‘innerContainer‘).getElementsByTagName(‘div‘).length; for (var loop = 0; loop < length; loop++) { if (ds[loop].style.zIndex > index) index = ds[loop].style.zIndex; } return parseInt(index); } //显示坐标信息。 function show(id, x, y) { document.getElementById(id).innerHTML = "left：" + x + "；top:" + y; }
HTML部分：
<style> #mainContainer { border: 10px solid #990000; width: 600px; height: 300px; } #innerContainer { width: 100%; height: 100%; } #Drag { /*border: 5px solid #C4E3FD;*/ background: #C4E3FD; width: 50px; height: 50px; top: 50px; left: 50px; z-index: 2; } #Drag2 { /*border: 5px solid #C4E3FD;*/ background: #ff0000; width: 50px; height: 50px; top: 50px; left: 50px; z-index: 3; }</style><div id="mainContainer"> <div id="innerContainer"> <div id="Drag" onm ousedown="moveBind(this, event)">1</div> <div id="Drag2" onm ousedown="moveBind(this, event)">2</div> </div></div><br />拖放状态：<span id="idShow">未开始</span>
使用JS制作一个鼠标可拖的DIV（二）——限制区域移动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。