MrFish Posted February 21, 2010 Share Posted February 21, 2010 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 More sharing options...
justsomeguy Posted February 23, 2010 Share Posted February 23, 2010 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.