运用DIV拖拽实现resize和碰撞检测
2015-07-31 13:46
621 查看
运用DIV拖拽实现resize和碰撞检测
Div由拖拽改变大小
演示demo当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式
用鼠标拖动右下角的小三角就可以对文本框的大小进行重新设置,于是我们试着在一个div中实现与上述相似的功能
先看布局
<style> #div1 { width:10px; height:10px; background:red; position:absolute; z-index:2; bottom:0; right: 0; cursor: nw-resize; background: url(images/drag_ico.gif); } #div2 { position: relative; width: 200px; height: 150px; background: #ccc; } .box { position: absolute; border: 1px dashed #000; } </style> <div id="div2"> <div id="div1"></div> </div>
用父元素div2代替“文本框”,用div1代替小三角,这里的定位,为后面的js实现方法打下了基础
JS的实现方法
<script> window.onload = function() { var oDiv = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); oDiv.onmousedown = function(ev) { var oEvent = ev || event; var disX = oEvent.clientX - oDiv.offsetLeft; var disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; oDiv2.style.width = oEvent.clientX - disX + oDiv.offsetWidth + 'px'; oDiv2.style.height = oEvent.clientY - disY + oDiv.offsetHeight + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; }; }; </script>
将小三角移动的x轴和y轴长度反应到其父元素的宽高上面,便得到了这样的效果
在拖动过程中检测两个div是否有重合
布局并不麻烦,两个div,定宽高、背景颜色即可演示demo
逆向思维:既然我们要检测div在运动过程中是否重合,那如果知道什么时候不重合,剩下的情况就是重合了,在这里,分析不重合的情况显然比分析重合的情况要容易
如图,当r1<l2, b1r2, t2>b2,这四个条件只要有任意一个成立,都会导致两个div不重合,这里的t,l,b,r在下面的代码中有详细定义。
<script> window.onload = function() { var oDiv = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); oDiv.onmousedown = function(ev) { var oEvent = ev || event; var disX = oEvent.clientX - oDiv.offsetLeft; var disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX + 'px'; oDiv.style.top = oEvent.clientY - disY + 'px'; var l1 = oDiv.offsetLeft; var r1 = l1 + oDiv.offsetWidth; var t1 = oDiv.offsetTop; var b1 = t1 + oDiv.offsetHeight; var l2 = oDiv2.offsetLeft; var r2 = l2 + oDiv2.offsetWidth; var t2 = oDiv2.offsetTop; var b2 = t2 + oDiv2.offsetHeight; if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) { oDiv2.style.backgroundColor = 'yellow'; } else { // 发生碰撞的时候 oDiv2.style.backgroundColor = 'green'; } }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }; }; </script>
相关文章推荐
- Gentoo: Chrome
- 【网络安全】Telnet 23端口扫描与信息提取
- auto 与decltype
- 20. Window moveBy() 方法
- Cake
- 关于同一个lable不同字体和颜色的设置
- Android 解决Handler在运行时加载报空指针异常
- R语言笔记4--可视化
- 转载:公钥和私钥
- Android中Parcelable接口用法
- OC学习:OC中的可变字典NSMutableDictionary和字典的遍历
- 逻辑地址、线性地址、物理地址
- ibatis事物管理不起作用
- 19. Window focus() 方法
- Java 数组类型(基本类型数组类型、封装类型数组类型、数组的数组类型)
- 连接时出错,(.ARM.exidx+0x0): undefined reference to `__aeabi_unwind_cpp_pr0'
- 退出ssh,程序继续运行的解决办法
- python 函数的参数
- 18. Window createPopup() 方法
- 二叉树基本操作