problem med div resize
Hej Eksperter,Jer er igang med at lave et dhtml "window" og drag 'n drop er klaret og det samme med luk, min og max. Men mit problem er når jeg vil resize div'en som gør det ud for "window" ved at trække den større. Hvis jeg prøver før jeg fortager en flytning af div'en så virker træk funktionen men den stopper ikke som den skal? og hvis man flytter div'en rundt på siden før man resizer så virker funktionen ikke?.
Her er min kode :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var IE = document.all?true:false
var doc = "";
doct = "";
var stat = "false";
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
document.onmousedown = getMouseXY;
var tempX = 0
var tempY = 0
function $(v) { return(document.getElementById(v)); }
function agent(v) {
return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0));
}
function xy(e,v) {
return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); }
function dragBox(id,e) {
var d = document.getElementById(id);
if(d.style.top == "")
d.style.top = "0px";
if(d.style.left == "")
d.style.left = "0px";
d.style.position = "absolute"
function drag(e) {
if(!stop){
d.style.top=(tX=xy(e,1)+oY-eY+'px');
d.style.left=(tY=xy(e)+oX-eX+'px');
}
}
var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };
}
function getMouseXY(e) {
//alert('ok');
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// document.getElementById("x").innerHTML = tempX;
//document.getElementById("y").innerHTML = tempY;
if(stat == 'true'){
//alert(doct);
d = document.getElementById(doc);
dt = document.getElementById(doct)
d.style.width = "200px";
d.style.height = "200px";
dt.style.width = "200px";
dt.style.height = "150px";
GetTop = d.style.top.replace("px" , "");
if(GetTop == "")
GetTop = 0;
GetLeft = d.style.left.replace("px" , "");
if(GetLeft == "")
GetLeft = 0;
GetWidth = d.style.width.replace("px" , "");
GetHeight = d.style.height.replace("px" , "");
GetWidthInn = dt.style.width.replace("px" , "");
GetHeightInn = dt.style.height.replace("px" , "");
document.getElementById("x").innerHTML = tempX;
document.getElementById("y").innerHTML = tempY;
var addwidth = parseInt(tempX) - parseInt(GetLeft);
var addheight = parseInt(tempY) - parseInt(GetTop);
var newWidth = addwidth + "px";
var newHeight = addheight + "px" ;
d.style.width = addwidth + "px" ;
d.style.height = addheight - 50 + "px";
dt.style.width = newWidth;
dt.style.height = newWidth;
document.getElementById("w").innerHTML = newWidth;
document.getElementById("h").innerHTML = newWidth;
}
return true
}
function resize(id,idt,statnew){
if(statnew != 'true')
alert(statnew);
doc = id;
doct = idt;
stat = statnew;
}
</script>
<style>
#dragbox{
position:absolute;
width:200px;
border:1px dashed #ccc;
top: 0;
left: 0;
}
#topbardrag{
height:30px;
width:100%;
display:block;
background-color:#999999;
clear:both;
}
#dragboxmiddel{
height:150px;
width:200px;
clear:both;
background-color:#00CCFF;
}
.bottomdrag{
height:20px;
max-height:20px;
width:100%;
border-top:1px dashed #ccc;
display:block;
cursor:nw-resize;
bottom:0px;
clear:both;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="dragbox">
<div id="topbardrag" onmousedown="dragBox('dragbox',event); return false;">
</div>
<div id="dragboxmiddel" class="middeldrag">
<div id="x"></div>
<div id="y"></div>
<div id="w"></div>
<div id="h"></div>
</div>
<div class="clear"></div>
<div id="dragboxbottom" class="bottomdrag" onmousedown="resize('dragbox','dragboxmiddel','true');" onmouseup="resize('dragbox','dragboxmiddel','true');" >
</div>
</div>
</body>
</html>
