StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow does positioning work in HTML/CSS?
text
Body
copied!<p>I'm trying to make a drag-and-drop engine in JavaScript. Right now, I'm adding a bounds feature which will trap the <code>.drag</code> object inside its parent element. However, to do this, I need to understand how positioning works in html, and I don't. Can anyone thoroughly explain it?</p> <p>Javascript Engine:</p> <pre><code>// JavaScript Document var posX; var posY; var element; var currentPos; document.addEventListener("mousedown", drag, false); function drag(event) { if(~event.target.className.search(/drag/)) { element = event.target; element.style.zIndex="100"; currentPos = findPos(element); posX = event.clientX -currentPos.x; posY = event.clientY -currentPos.y; if(~event.target.className.search(/bound/)) document.addEventListener("mousemove", boundMovement, false); else document.addEventListener("mousemove", freeMovement, false); } } function freeMovement(event) { // This functions works if (typeof(element.mouseup) == "undefined") document.addEventListener("mouseup", drop, false); //Prevents redundantly adding the same event handler repeatedly element.style.left = event.clientX - posX + "px"; element.style.top = event.clientY - posY + "px"; } function boundMovement(event) { // This function doesn't work if (typeof(element.mouseup) == "undefined") document.addEventListener("mouseup", drop, false); //Prevents redundantly adding the same event handler repeatedly // Below logic is false- I wish to understand why =] currentPos = findPos(element.offsetParent); if((event.clientX - posX) <= currentPos.x) element.style.left = event.clientX - posX + "px"; if((event.clientY - posY) <= currentPos.y) element.style.top = event.clientY - posY + "px"; } function drop() { element.style.zIndex="1"; document.removeEventListener("mousemove", boundMovement, false); document.removeEventListener("mousemove", freeMovement, false); document.removeEventListener("mouseup", drop, false); //alert("DEBUG_DROP"); } function findPos(obj) { // Donated by `lwburk` on StackOverflow var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } } </code></pre> <p>Here is the CSS I am using:</p> <pre><code>@charset "utf-8"; /* CSS Document */ .drag { position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .bound { /* Class to signify that the drag_object can not leave the parent element */ ; } .square { width: 100px; height: 100px; background: red; cursor:move; } p { padding: 0px; margin: 0px; outline-style: dotted; outline-color: #000; outline-width: 1px; } </code></pre> <p>Some example HTML:</p> <pre><code><p class="drag bound square">Thing One</p> <p class="drag square">Thing Two</p> </code></pre> <p>Please note I am including the JavaScript so that if I have questions on how things are applied relative to what I've written. Also, thank you all for reading and helping. StackOverflow has been an exceptional resource in learning how to code in JavaScript.</p> <p>EDIT:</p> <p>1) I should say that I am coding the engine to help me learn the language. This is my first week of JavaScript, and I would like to be able to code in the language before I use a library.</p> <p>2) For example I would really like for someone to explain how offsets are working here. I would like to know how instead of using <code>position:absolute</code> to make my JavaScript engine, I can use <code>position:relative</code> so that elements can stack on top of each other ect.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload