flytta lager med onmousedown

mikael_aMedlem sedan mars 2000475 inlägg
11 apr. 2003 13:55#1
hej, jag har skapat fem stycken lager som ligger i ett sjätte (container). Jag försöker att genom att trycka på lager titleBar få lager container att flytta på sig...
försöker även att få, max-min, och rezise att fungera, men det verkar som om min kod är helt åt skogen

<?xml version="1.0" encoding="iso-8859-1"?>
<!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=iso-8859-1"/>
		<title>Test</title>
		<style type="text/css" media="screen"><!--
#container { background-color: #5db1ff; position: absolute; top: 16px; left: 16px; width: 400px; height: 400px; visibility: visible; display: block }
#titleBar  { background-color: #5db157; position: absolute; top: 0px; left: 0px; width: 400px; height: 20px; visibility: visible; display: block }
#left   { background-color: #5d7a88; position: absolute; top: 20px; left: 0px; width: 17px; height: 360px; visibility: visible; display: block }
#right   { background-color: #5d7a88; position: absolute; top: 20px; left: 383px; width: 17px; height: 359px; visibility: visible; display: block }
#bottom  { background-color: #5de588; position: absolute; top: 380px; left: 0px; width: 400px; height: 20px; visibility: visible; display: block }
#layer1  { background-color: #5de588; position: absolute; top: 20px; left: 16px; width: 367px; height: 360px; visibility: visible; display: block }
--></style>

	<SCRIPT LANGUAGE="JavaScript">

	var ie5 = (document.getElementById && document.all);
	var ns6 = (!document.all && document.getElementById);
	var timerID = null;
	var active = 0;

	function start(windowName, contentName){
		if(ie5 || ns6){
			dragWind = document.getElementById(windowName);
			dragCont = document.getElementById(contentName);
			y = coordsY-parseInt(dragWind.style.top);
			x = coordsX-parseInt(dragWind.style.left);
			dragWind.style.zIndex = (start.zCount++);
			active=1;
		}
	}

	start.zCount=0;
	function drag(e){
		if(ie5 || ns6){
			coordsY = ns6?e.clientY:event.clientY;
			coordsX = ns6?e.clientX:event.clientX;
			if(active){
				dragWind.style.top = coordsY-y;
				dragWind.style.left = coordsX-x;
			}
		}
	}

	function closeWin(){
		if(ie5 || ns6){
			dragWind.style.left= -3000;
		}
	}

	function maxWin(winMaxWidth, winMaxHeight){
		if(ie5 || ns6){
			dragWind.style.width = winMaxWidth;
			dragWind.style.height = winMaxHeight;
			dragCont.style.width = ns6?winMaxWidth:winMaxWidth-6;
			dragCont.style.height = ns6?winMaxHeight-20:winMaxHeight-24;
		}
	}

	function minWin(winMinWidth, winMinHeight){
		if(ie5 || ns6){
			dragWind.style.width = winMinWidth;
			dragWind.style.height = winMinHeight;
			dragCont.style.width = ns6?winMinWidth:winMinWidth-6;
			dragCont.style.height = ns6?winMinHeight-20:winMinHeight-24;
		}
	}

	function openWin(windowName, contentName, topWin, leftWin, winMinWidth, winMinHeight){
		if(ie5 || ns6){
			dragWind = document.getElementById(windowName);
			dragCont = document.getElementById(contentName);
			dragWind.style.visibility = "visible";
			dragWind.style.top = topWin;
			dragWind.style.left = leftWin;
			dragWind.style.width = winMinWidth;
			dragWind.style.height = winMinHeight;
			dragCont.style.top = 20;
			dragCont.style.left = 0;
			dragCont.style.width = ns6?winMinWidth:winMinWidth-6;
			dragCont.style.height = ns6?winMinHeight-20:winMinHeight-24;
			dragWind.style.zIndex = (start.zCount++);
		}
	}

	function dragInit(){
		if(ie5 || ns6){
			imgs = document.getElementById("container").getElementsByTagName("IMG");
			for(var i=0; i<imgs.length;i++){
				imgs[i].style.cursor = (ie5)?"hand":"pointer";
				imgs[i].ondragstart = new Function("return false");
			}
			openWin('wind1','cont1',50,300,300,200);
		}
	}

	document.onmousemove = drag;
	document.onmouseup = new Function("active=0");
	document.onselectstart = new Function("return false");
	onload=dragInit;

	function hidden()
	{document.body.style.overflow='hidden';}

	function unhidden()
	{document.body.style.overflow='';}

	</script>

	</head>

	<body onload="hidden()" bgcolor="#ffffff">

	<p><a href="#" onclick="openWin('titleBar','text',50,300,300,200)">Öppna fönster</a><br></p>

		<div id="container">

		<!-- window 1 -->

			<div id="titleBar" onmousedown="start('titleBar','text');">
				<img src="images/window_left_top.gif" alt="" height="20" width="17" border="0"/>
				<img src="images/window_top.gif" alt="" height="20" width="315" border="0"/>
				<img src="images/button_min.gif" alt="" onclick="minWin(300,200)" title="minimize" height="20" width="17" border="0"/>
				<img src="images/button_max.gif" onclick="maxWin(500,250)" title="maximize" alt="" height="20" width="17" border="0"/>
				<img src="images/button_close.gif" onclick="closeWin()" title="close" alt="" height="20" width="17" border="0"/>
				<img src="images/window_right_top.gif" alt="" height="20" width="17" border="0"/></div>

			<div id="left">
				<img src="images/window_left.gif" alt="" height="360" width="17" border="0"/></div>

			<div id="right">
				<img src="images/window_right.gif" alt="" height="360" width="17" border="0"/></div>

			<div id="bottom">
				<img src="images/window_left_bottom.gif" alt="" height="20" width="17" border="0"/>
				<img src="images/window_bottom.gif" alt="" height="20" width="366" border="0"/>
				<img src="images/window_right_bottom.gif" alt="" height="20" width="17" border="0"/></div>

			<div id="text">
				test, test</div>
		</div>

		<p/>
	</body>

</html>
tacksam för all hjälp