87,916
社区成员
发帖
与我相关
我的任务
分享拖拽div，四个顶端怎么改变大小、
四个顶端点击后，怎么改变大小？例如，点击左上，就是左边和上边同时增大或缩小这样。
我这代码是不是判断条件有问题还是怎么样？点击四个顶点，都只是向上或向下改变大小。
那四个顶端的判断条件怎么写？
我这代码是不是判断条件有问题还是怎么样？点击四个顶点，都只是向上或向下改变大小。
那四个顶端的判断条件怎么写？
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#box{
width:100px;
height:100px;
position:absolute;
background:#FD8888;
top:100px;
left:400px;
}
</style>
</head>
<body>
<div id='box'></div>
</body>
<script>
var obox = document.getElementById('box');
function changediv(obj){
obox.onmousedown = function (ev){
var ev = ev || event;
var direction = '';
var disL = this.offsetLeft;
var disx = ev.clientX;
var disy = ev.clientY;
var disW = this.offsetWidth;
var disT = this.offsetTop;
var disH = this.offsetHeight;
//判断条件
if(disx < (disL +10) && disy < (disT + 10) ){
dircetion = 'topleft';
alert(1);
}
if(disx < (disL + 10 ) && disy > (disT + disH - 10)){
dircetion = 'bottomleft';
}
if(disx > (disL + disW - 10) && disy < (disT + 10) ){
dircetion = 'topright';
}
if(disx > (disL + disW - 10) && disy > (disT + disH - 10) ){
dircetion = 'bottomright';
}
if(disx < (disL + 10 )){
direction = 'left';
alert(2);
}
if(disx > (disL + disW - 10)){
direction = 'right';
}
if(disy < (disT + 10)){
direction = 'top';
alert(3);
}
if(disy > (disT + disH - 10)){
direction ='bottom';
}
document.onmousemove = function (ev){
var ev = ev || event;
switch (direction){
case 'left':
obj.style.left = disL - (disx - ev.clientX) + 'px';
obj.style.width = disW + (disx - ev.clientX) + 'px';
break;
case 'right':
obj.style.width = disW + (ev.clientX - disx) +'px';
break;
case 'top':
obj.style.top = disT - (disy - ev.clientY) + 'px';
obj.style.height = disH + (disy - ev.clientY) + 'px';
break;
case 'bottom':
obj.style.height = disT + (ev.clientY - disy) +'px';
break;
//四个顶端
case 'topleft':
obj.style.left = disL - (disx - ev.clientX) + 'px';
obj.style.width = disW + (disx - ev.clientX) + 'px';
obj.style.top = disT - (disy - ev.clientY) + 'px';
obj.style.height = disH + (disy - ev.clientY) + 'px';
break;
case 'topright':
obj.style.top = disT - (disy - ev.clientY) + 'px';
obj.style.height = disH + (disy - ev.clientY) + 'px';
obj.style.width = disW + (ev.clientX - disx) +'px';
break;
case 'bottomleft':
obj.style.height = disT + (ev.clientY - disy) +'px';
obj.style.left = disL - (disx - ev.clientX) + 'px';
obj.style.width = disW + (disx - ev.clientX) + 'px';
break;
case 'bottomright':
obj.style.height = disT + (ev.clientY - disy) +'px';
obj.style.width = disW + (ev.clientX - disx) +'px';
break;
}
}
document.onmouseup = function (){
document.onmousemove = null;
}
}
}
changediv(obox);
</script>
</html>
...全文
请发表友善的回复…
发表回复
Rni-L 2015-11-12
- 打赏
- 举报
这个改了还是无法改变两边的大小。。。。
天际的海浪 2015-11-12
- 打赏
- 举报
direction
if(disx < (disL +10) && disy < (disT + 10) ){
direction = 'topleft';
} else if(disx < (disL + 10 ) && disy > (disT + disH - 10)){
direction = 'bottomleft';
} else if(disx > (disL + disW - 10) && disy < (disT + 10) ){
direction = 'topright';
} else if(disx > (disL + disW - 10) && disy > (disT + disH - 10) ){
direction = 'bottomright';
} else if(disx < (disL + 10 )){
direction = 'left';
} else if(disx > (disL + disW - 10)){
direction = 'right';
} else if(disy < (disT + 10)){
direction = 'top';
} else if(disy > (disT + disH - 10)){
direction ='bottom';
}
