Learn VBA & Macros in 1 Week!

JavaScript - Erratic Behaviour Onmousedown

Full Excel VBA Course - Beginner to Expert

Erratic Behaviour Onmousedown	View Content

I have 9 boxes which I can drag around an invisible grid however when the onMouseDown function is called for the first time on each of the boxes, they behave erratically, then once
all boxes have been clicked once, the entire script works as it should. I've tried using default values when declaring the variables however it doesn't seem to do anything.

Does this happen with anyone else, anything obvious I'm missing.

Code:

<html>
<head>

<script language="javascript">
var x;
var y;
var org_top;
var org_left;
var diff_org_top;
var diff_org_left;
var element;
var element2;
var being_dragged = false;
var newleft;
var newtop;

function mouse_move(event)
	{
	if(event.offsetX || event.offsetY) 
		{
		x=event.offsetX;
		y=event.offsetY;
		}
	else	
		{
		x=event.pageX;
		y=event.pageY;
		}

	if(being_dragged = true)
		{
		document.getElementById(element).style.top = y-diff_org_top +'px';
		document.getElementById(element).style.left = x-diff_org_left +'px';
		}
	}

function mouse_down(ele_name)
	{
	being_dragged = true;
	element = document.elementFromPoint(x, y).id;

	org_top = document.getElementById(element).style.top;
	org_left = document.getElementById(element).style.left;

	diff_org_top = y-org_top.substring(org_top.length-2,org_top);
	diff_org_left = x-org_left.substring(org_left.length-2,org_left);
	}

function mouse_up()
	{
	being_dragged = false;
	
	newtop = Math.floor((y-diff_org_top+100)/200) * 200;
	newleft = Math.floor((x-diff_org_left+100)/200) * 200;
	
	if (newtop<0)
		{
		newtop = 0;
		}
	else if (newtop>400)
		{
		newtop = 400;
		}

	if (newleft<0)
		{
		newleft = 0;
		}
	else if (newleft>400)
		{
		newleft = 400;
		}

	document.getElementById(element).style.display = 'none';
	if (document.elementFromPoint(newleft+100, newtop+100).id != '')
		{
		element2 = document.elementFromPoint(newleft+100, newtop+100).id;
		document.getElementById(element2).style.top = org_top;
		document.getElementById(element2).style.left = org_left;
		element2 = null
		}
	document.getElementById(element).style.display = 'block';

	document.getElementById(element).style.top = newtop +'px';
	document.getElementById(element).style.left = newleft +'px';		

	element = null;
	}

</script>

<style type="text/css">
.box
	{
	float:left;
	display:block;
	width:190;
	height:190;
	margin:5;
	position:absolute;
	}

.red
	{
	background:red;
	top:0;
	left:0;
	}

.blue
	{
	background:blue;
	top:0;
	left:201;
	}
	
.yellow
	{
	background:yellow;
	top:0;
	left:401;
	}

.green
	{
	background:green;
	top:201;
	left:0;
	}

.violet
	{
	background:violet;
	top:201;
	left:201;
	}

.orange
	{
	background:orange;
	top:201;
	left:401;
	}

.maroon
	{
	background:maroon;
	top:401;
	left:0;
	}

.lime
	{
	background:lime;
	top:401;
	left:201;
	}

.indigo
	{
	background:indigo;
	top:401;
	left:401;
	}
</style>
</head>

<body onMouseMove="mouse_move(event)">
	<div id="one" class="red box" onMouseDown="mouse_down('one')" onMouseUp="mouse_up()">
	</div>
	
	<div id="two" class="blue box" onMouseDown="mouse_down('two')" onMouseUp="mouse_up()">
	</div>
	
	<div id="three" class="yellow box" onMouseDown="mouse_down('three')" onMouseUp="mouse_up()">
	</div>
	
	<div id="four" class="green box" onMouseDown="mouse_down('four')" onMouseUp="mouse_up()">
	</div>
	
	<div id="five" class="orange box" onMouseDown="mouse_down('five')" onMouseUp="mouse_up()">
	</div>
	
	<div id="six" class="violet box" onMouseDown="mouse_down('six')" onMouseUp="mouse_up()">
	</div>
	
	<div id="seven" class="maroon box" onMouseDown="mouse_down('seven')" onMouseUp="mouse_up()">
	</div>
	
	<div id="eight" class="lime box" onMouseDown="mouse_down('eight')" onMouseUp="mouse_up()">
	</div>
	
	<div id="nine" class="indigo box" onMouseDown="mouse_down('nine')" onMouseUp="mouse_up()">
	</div>
</body>
</html>

Full Excel VBA Course - Beginner to Expert

Settimeout Erratic

Similar Tutorials

JavaScript - Erratic Behaviour Onmousedown

Erratic Behaviour Onmousedown

Similar Tutorials

Settimeout Erratic

Help With Js Function In A Onmousedown?

Get Top And Left Onmousedown?

Dom Onmousedown, Onmousemove

Why Onmousedown Event Works For Hidden Div?

Over-riding I-beam Cursor Onmousedown-drag

Prevent Esc Behaviour

Unexpected Array Behaviour

Strange Saveas Behaviour

Play Movie Behaviour

Strange Blur Behaviour

Curious Behaviour On Css Style Changer

Weired Behaviour Of Anchor Tag In C# And Javascript

Strange Behaviour In Window.prompt()

Strange Behaviour Of Java Scripts In Firefox Help

Replace Link Text And Change Link Behaviour