move div onmousedown w/ boundaries

[dzhax]

Hey everyone its been a while. Super busy with my actual job, but now I'm back to working a little on my project.Just a little background. I'm working on a cms that is all ajax so that means a lot of php and js. Currently I'm working on the page editor. I'm trying to get a close to a full featured html editor as possible that is 100% web based.So now down to the main reason for my post:I have a textarea that I am using to allow users to add their code and I want to make the page kind of like a pc desktop.I already got some js to allow me to click and drag a div around the screen. Now i just need to define some boundaries.It would be weird if you could drag a window off of the "desktop" so I still want full movement of the div but make it either 1. stop at the edge of the "parent div" or 2. allow to cut off the div as if it were being moved behind the edge of the div (kind of like "overflow: hidden;" css style).So now to the code:This is the js im using to move the div

<script type="text/javascript">//<![CDATA[//*****************************************************************************// Do not remove this notice.//// Copyright 2001 by Mike Hall.// See http://www.brainjar.com for terms of use.//*****************************************************************************// Determine browser and version.function Browser() {  var ua, s, i;  this.isIE	= false;  this.isNS	= false;  this.version = null;  ua = navigator.userAgent;  s = "MSIE";  if ((i = ua.indexOf(s)) >= 0) {	this.isIE = true;	this.version = parseFloat(ua.substr(i + s.length));	return;  }  s = "Netscape6/";  if ((i = ua.indexOf(s)) >= 0) {	this.isNS = true;	this.version = parseFloat(ua.substr(i + s.length));	return;  }  // Treat any other "Gecko" browser as NS 6.1.  s = "Gecko";  if ((i = ua.indexOf(s)) >= 0) {	this.isNS = true;	this.version = 6.1;	return;  }}var browser = new Browser();// Global object to hold drag information.var dragObj = new Object();dragObj.zIndex = 0;function dragStart(event, id) {  var el;  var x, y;  // If an element id was given, find it. Otherwise use the element being  // clicked on.  if (id)	dragObj.elNode = document.getElementById(id);  else {	if (browser.isIE)	  dragObj.elNode = window.event.srcElement;	if (browser.isNS)	  dragObj.elNode = event.target;	// If this is a text node, use its parent element.	if (dragObj.elNode.nodeType == 3)	  dragObj.elNode = dragObj.elNode.parentNode;  }  // Get cursor position with respect to the page.  if (browser.isIE) {	x = window.event.clientX + document.documentElement.scrollLeft	  + document.body.scrollLeft;	y = window.event.clientY + document.documentElement.scrollTop	  + document.body.scrollTop;  }  if (browser.isNS) {	x = event.clientX + window.scrollX;	y = event.clientY + window.scrollY;  }  // Save starting positions of cursor and element.  dragObj.cursorStartX = x;  dragObj.cursorStartY = y;  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;  // Update element's z-index.  dragObj.elNode.style.zIndex = ++dragObj.zIndex;  // Capture mousemove and mouseup events on the page.  if (browser.isIE) {	document.attachEvent("onmousemove", dragGo);	document.attachEvent("onmouseup",   dragStop);	window.event.cancelBubble = true;	window.event.returnValue = false;  }  if (browser.isNS) {	document.addEventListener("mousemove", dragGo,   true);	document.addEventListener("mouseup",   dragStop, true);	event.preventDefault();  }}function dragGo(event) {  var x, y;  // Get cursor position with respect to the page.  if (browser.isIE) {	x = window.event.clientX + document.documentElement.scrollLeft	  + document.body.scrollLeft;	y = window.event.clientY + document.documentElement.scrollTop	  + document.body.scrollTop;  }  if (browser.isNS) {	x = event.clientX + window.scrollX;	y = event.clientY + window.scrollY;  }  // Move drag element by the same amount the cursor has moved.  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";  if (browser.isIE) {	window.event.cancelBubble = true;	window.event.returnValue = false;  }  if (browser.isNS)	event.preventDefault();}function dragStop(event) {  // Stop capturing mousemove and mouseup events.  if (browser.isIE) {	document.detachEvent("onmousemove", dragGo);	document.detachEvent("onmouseup",   dragStop);  }  if (browser.isNS) {	document.removeEventListener("mousemove", dragGo,   true);	document.removeEventListener("mouseup",   dragStop, true);  }}//]]></script>

this is my body html

<div id="borderBox" style="height:99%;"><div id="dragableElement" style="padding: 3px; background:teal; width: auto; border:thin silver solid; color:silver; font-size: 11px; font-style: italic; font-weight: bold; position:absolute; top:50px; left: 50px;">	<table cellpadding="0" cellspacing="0" style="padding:0px; width:auto; border:0px transparent solid; color:silver;">	  <tr>		<td style="width:auto; text-align:left; font-size: 12px; font-weight: bold;" oncontextmenu="return false;" onmouseover="this.style.cursor='pointer';" onmousedown="dragStart(event, 'dragableElement')">giEditor</td>		<td style="width:20px; text-align:center; font-size: 18px;" onclick="alert('Minimize');" oncontextmenu="return false;" onmouseover="this.style.cursor='pointer';"> - </td>		<td style="width:20px; text-align:center;" onclick="alert('Terminate');" oncontextmenu="return false;" onmouseover="this.style.cursor='pointer';"> X </td>	  </tr>	  <tr>		<td colspan="3" style="height: 3px; font-size: 3px;" oncontextmenu="return false;"></td>	  </tr>	  <tr>		<td colspan="3" oncontextmenu="return false;">		  <textarea name="content" style="width:100%;"></textarea>		</td>	  </tr>	</table></div></div>

To see a live view of what I have so far: http://www.garrett-innovations.com/cpThis is my test/project site so its just full of random projects that have not been finished yet or abandoned.

[dzhax]

50 views and not one response??? I really didn't think it was a hard problem I just have no idea how to do it.

[justsomeguy]

You should be able to get the size and position of each element. You can use that to calculate where each border is, and the drag function will need to check where the current border is and whether or not it's passed the parent's border, and if so move it back.

[dzhax]

You should be able to get the size and position of each element. You can use that to calculate where each border is, and the drag function will need to check where the current border is and whether or not it's passed the parent's border, and if so move it back.

The problem I would have with that is everything is dynamic i want it to fit to the users screen. Im trying for the cloud desktop look.Unless there is a way to check for the width and height that way it can then be set for the boundry.

[Synook]

You can use window.innerHeight and window.innerWidth.