实现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" onmousedown="moveBind(this, event)">1</div> <div id="Drag2" onmousedown="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;
/*******************以上方法是在鼠标按下事件里 onmousedown ******************/
/*******************以下方法是在鼠标按下事件里 onmousemove ******************/
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" onmousedown="moveBind(this, event)">1</div> <div id="Drag2" onmousedown="moveBind(this, event)">2</div> </div> </div> <br />拖放状态:<span id="idShow">未开始</span>
转载于:https://www.cnblogs.com/Helios1/p/10261143.html
实现div在固定区域跟随鼠标移动点击拖动而产生的变化相关推荐
- C语言跟随鼠标画方框,JS拖动鼠标画出方框实现鼠标选区的方法
本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法.分享给大家供大家参考.具体如下: 相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作 ...
- js-拖拽-div跟随鼠标的拖拽而移动
拖拽: 鼠标按下目标区域---开始拖拽---onmousedown __并列__鼠标移动时候被拖拽的元素跟随鼠标移动-onmousemove _并列_ 当鼠标松开时,被拖拽的元素固定在当前位置onmo ...
- JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- 如何让一个div跟随鼠标移动
鼠标移动上去,弹出一个div,并且div跟随鼠标移动. 代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head ...
- JavaScript div跟随鼠标移动
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>di ...
- JavaScript实现一串div跟随鼠标移动效果(幻影效果)
JavaScript实现一串div跟随鼠标移动效果 上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果.现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果.如图: ...
- JavaScript实现心形div块跟随鼠标移动(幻影效果)
JavaScript实现心形div块跟随鼠标移动(幻影效果) 上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动,然后有轩辕问我,想给女朋友做一个好看的可不可以.现在我们来实现 ...
- js效果 div跟随鼠标移动
js效果 div跟随鼠标移动 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- unity实现UI线条一端固定另一端跟随鼠标点击位置并实时拉长或缩短
unity实现UI线条一端固定另一端跟随鼠标点击位置并实时拉长或缩短 using UnityEngine; public class Dzcontroller : MonoBehaviour {boo ...
最新文章
- python -- IO多路复用
- [公告]博客园新服务器照片
- decimal double java_Java BigDecimal和double BigDecimal类
- Response.Write具体介绍
- html文本框 控件,标签和文本框都用于显示文本
- CentOS 7安装megacli
- python中threading模块_举例详解Python中threading模块的几个常用方法
- 剑三哪些插件是必备的_盘点那些年用过的神级CAD插件,每一款都舍不得卸载
- 新版二开cp盲盒小纸条月老小程序源码【源码好优多】
- 关于字符串中length与length()的区别
- php发送邮件教程,支持发送有附件的电子邮件-PHPMailer使用教程
- PostgreSQL 访问外部数据库之 postgres_fdw
- 10套word版个人简历模板,各种风格个人简历模板
- Unity 游戏实例开发集合 之 CompoundBigWatermelon (简单合成一个大西瓜) 休闲小游戏快速实现
- Windows10:关于触摸板的驱动不适用的问题
- 使用Juju将OpenStack部署在单机的LXD容器上(by quqi99)
- LIGO探测到两个“瘦子”黑洞形成的引力波
- 几款自制SDR的USB耗电测试
- 谈谈区块链:深入理解软硬分叉
- C# 屏幕取词 鼠标取词 非剪切板模式
热门文章
- leetcode448-Find All Numbers Disappeared in an Array
- 琢越网用户使用手册和反馈
- Mesos:数据库使用的持久化卷
- java 蓝桥杯算法训练 数组查找及替换
- 2021-06-01 深入分析偏向锁、轻量级锁和重量级锁
- JVM专题之类加载机制
- pdo mysql limit_PHP mysql中limit用法详解(代码示例)
- (21)System Verilog按时间顺序的通知需求(变量驱动)
- java 多文字水印_Java 如何给Word文档添加多行文字水印
- STM32F103:一.(2)STLINK的配置