Div由拖拽改变大小
演示demo
当我们运用html元素”textarea”写一个文本输入框时，浏览器会自动生成以下样式
用鼠标拖动右下角的小三角就可以对文本框的大小进行重新设置，于是我们试着在一个div中实现与上述相似的功能
先看布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <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的实现方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <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在运动过程中是否重合，那如果知道什么时候不重合，剩下的情况就是重合了，在这里，分析不重合的情况显然比分析重合的情况要容易
如图，当r1r2, t2>b2，这四个条件只要有任意一个成立，都会导致两个div不重合，这里的t,l,b,r在下面的代码中有详细定义。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <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>
|