Jump to content

Unkown Object "2"


MrFish
 Share

Recommended Posts

No one answered my last post with the same script. I use a function that add an event listener for each object with a "draggable" and "slidable" class. I have gotten the dragging to work but while I was going onto the sliding portion I came to a problem where I needed to set an id for all sliding elements if it's not already set. This is so if you drag the div too quickly the cursor will temporarily be ahead of the dragging div. This causes a problem when the div finds itself back under the cursor where the mouseover event is sent on itself. This will be a problem because the would make this element slide on itself or automatically trigger the sliding of all the other elements with the same "slide id" (not implemented but this is all too much information anyway).Anyway, i'm automatically setting a random-number id to any object that is run through the addEventListener function. But right now I'm alerting all objects that run through the function. Everything that runs through is an object except at the end a "2" shows up. I have no idea what this is. Just copy and past this into an html document and see what I mean. All you need to see is what is in the Events() function to see what is being sent to the addEventListener function

<html><head>	<title>Event Tests</title>	<script type="text/javascript">		function addEventListener(obj, eventType, listener, capturing)		{			alert(obj);			if(obj.addEventListener)			{				obj.addEventListener(eventType, listener, capturing);			}			else if(obj.attachEvent)			{				obj.attachEvent("on" + eventType, listener);			}			if(obj.getAttribute("id") == null)			{				obj.setAttribute("id", Math.ceil(Math.random()*1000000));			}		}				function Events()		{			draggable = document.getElementsByClassName("draggable");			slidable = document.getElementsByClassName("slidable");						for(var x in draggable)			{				addEventListener(draggable[x], "mousedown", drag, false);			}						for(var x in slidable)			{				addEventListener(slidable[x], "mouseover", slide, false);			}						addEventListener(document, "selectstart", checkDrag, false);			addEventListener(document, "mousemove", getMouseCoords, false);			addEventListener(document, "mouseup", drop, false);		}		// Listeners			function drag()			{								if(isDragging)				{					persistentObject.style.left = mouseX - draggingOffsetX;					persistentObject.style.top = mouseY - draggingOffsetY;				}				else				{						noMarginX = this.offsetLeft  -this.parentNode.offsetLeft;					noMarginY = this.offsetTop - this.parentNode.offsetTop;					dragging_originalX = this.offsetLeft - 10;					dragging_originalY = this.offsetTop - 10;					draggingOffsetX = mouseX - this.offsetLeft + noMarginX;					draggingOffsetY = mouseY - this.offsetTop + noMarginY;					this.innerHTML = "";					persistentObject = this;					isDragging = true;					draggingInterval = setInterval(drag, 50);				}			}						function drop()			{				persistentObject.innerHTML = "dropped";				isDragging = false;				persistentObject.style.left = dragging_originalX;				persistentObject.style.top = dragging_originalY;				clearInterval(draggingInterval);			}						function slide()			{				if(isDragging)				{					if(slidable.length < 2)					{						drop();						return false;						//alert("Error: You dumbass, how are you going to have a sliding element when there is only one slidable element that is related to this one?!");					}					else					{						if(slideInitiated)						{							alert(slideDirection);						}						else						{							thisId = persistentObject.getAttribute("id");							alert(persistentObject.getAttribute("id"));							for(var i = 0; i <= (slidable.length-1); i++)							{								if(slidable[i].getAttribute("id") != thisId)									alert(slidable[i].getAttribute("id") + " " + thisId);							}														if(referenceSlidable.offsetLeft == dragging_originalX)								slideDirection = "vertical";							else								slideDirection = "horizontal";														slideInitiated = true;						}					}										slideInterval = setInterval(slide, 50);				}			}						function checkDrag(e)			{				if(e, isDragging)					e.preventDefault();					return false;				return true;			}						function getMouseCoords(e)			{				documentEvent = window.event || e;				mouseX = documentEvent.clientX || e.pageX;				mouseY = documentEvent.clientY || e.pageY;			}		//				function init()		{			Events();			isDragging = false;			slideInitiated = false;			mouseX = 0;			mouseY = 0;		}	</script>	<style type="text/css">		body		{			margin: 0px;			padding: 0px;		}				div		{			float: left;			margin: 10px;			background-color: #0ff;			width: 100px;			height: 100px;			text-align: center;		}				.draggable		{			position: relative;						background-color: #ff0;			cursor: move;		}	</style></head><body onload="init()">	<div class="draggable slidable" dragId="1"></div>	<div></div>	<div class="draggable slidable"></div>	<div></div></body></html>

Link to comment
Share on other sites

When you use a for..in loop, you loop through all properties and methods of an object. So when you use that on an array, you're going to include things like array.length (which is probably the 2 you're seeing), array.pop, array.push, etc. If you want to loop through only the items in an array, use a regular for loop instead.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...