StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I set a "bounding" area for my drag-able object in javascript?
text
Body
copied!<p>I'm making a Drag and Drop JavaScript engine. I learned how to set a bounding box as the parent element. However, now I wish to set the bounding box to any parent of any parent, or as the entire page (bound-less).</p> <p>Right now my Javascript Engine looks like:</p> <pre><code>// JavaScript Document var dragObj; document.addEventListener("mousedown", down, false); function down(event) { if(~event.target.className.search(/drag/)) { dragObj = makeObj(event.target); dragObj.element.style.zIndex="100"; document.addEventListener("mousemove", freeMovement, false); } } function freeMovement(event) { if (typeof(dragObj.element.mouseup) == "undefined") document.addEventListener("mouseup", drop, false); //Prevents redundantly adding the same event handler repeatedly dragObj.element.style.left = Math.max(0, Math.min(event.clientX - dragObj.posX, dragObj.boundX)) + "px"; dragObj.element.style.top = Math.max(0, Math.min(event.clientY - dragObj.posY, dragObj.boundY)) + "px"; } function drop() { dragObj.element.style.zIndex="1"; document.removeEventListener("mousemove", freeMovement, false); document.removeEventListener("mouseup", drop, false); //alert("DEBUG_DROP"); } function makeBoundlessObj(e) { var obj = new Object(); obj.element = e; obj.boundX = e.parentNode.offsetWidth - e.offsetWidth; obj.boundY = e.parentNode.offsetHeight - e.offsetHeight; obj.posX = event.clientX - e.offsetLeft; obj.posY = event.clientY - e.offsetTop; return obj; } function makeObj(e) { obj = new Object(); obj.element = e; obj.boundX = e.parentNode.offsetWidth - e.offsetWidth; obj.boundY = e.parentNode.offsetHeight - e.offsetHeight; obj.posX = event.clientX - e.offsetLeft; obj.posY = event.clientY - e.offsetTop; var curleft = curtop = 0; if (e.offsetParent) { do { curleft += e.offsetLeft; curtop += e.offsetTop; //alert(e.id + ":" + e.innerHTML); if(~e.className.search(/bound/)) { obj.boundX = curleft - obj.element.offsetLeft; obj.boundY = curtop - obj.element.offsetTop; return obj; } } while (e = e.offsetParent); } return obj; } 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>My CSS is as follows:</p> <pre><code>@charset "utf-8"; /* CSS Document */ * { padding: 0px; margin: 0px; } .drag { position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .bound { position: relative; } .square { width: 100px; height: 100px; background: red; cursor:move; } #center { width: 500px; height: 300px; margin: auto; margin-top: 50px; background-color:#ccc; text-align: center; border-radius: 25px; -moz-border-radius: 25px; } #box { background-color: #FF3; height: 278px; border-radius: 0 0 25px 25px; -moz-border-radius: 0 0 25px 25px; opacity: 0.5; } </code></pre> <p>And my HTML is pretty clean:</p> <pre><code><div id="center"> <h1>Hello World! <hr /></h1> <div id="box" class="bound"> <p class="drag square"> One </p> <p class="drag square"> Two </p> </div> </div> </code></pre> <p>I've attempted to make the proper functions multiple times. I'll give one that I've made which doesn't work, and I'll list why:</p> <ol> <li><p>If it doesn't have bounds, I set the default bounds as the parent element (because I don't know how to set bounds as the entire page)</p></li> <li><p>If one of the parent elements <strong>IS</strong> a bound, then I am not setting the bound coordinates correctly (again, I don't know how)</p></li> </ol> <p>Oh, and I set the bounds while I create the drag_object.</p> <p>JavaScript creation function:</p> <pre><code>function makeObj(e) { var obj = new Object(); obj.element = e; obj.boundX = e.parentNode.offsetWidth - e.offsetWidth; obj.boundY = e.parentNode.offsetHeight - e.offsetHeight; obj.posX = event.clientX - e.offsetLeft; obj.posY = event.clientY - e.offsetTop; var curleft = curtop = 0; if (e.offsetParent) { do { curleft += e.offsetLeft; curtop += e.offsetTop; //alert(e.id + ":" + e.innerHTML); if(~e.className.search(/bound/)) { obj.boundX = curleft - obj.element.offsetLeft; obj.boundY = curtop - obj.element.offsetTop; return obj; } } while (e = e.offsetParent); } return obj; } </code></pre> <p>What is the correct math for setting the bounding box and why? Can I get rid of the <code>position: relative</code> in the <code>.bound</code> class? Can I make <code>.drag</code> class not <code>position: absolute</code>? I know all of these things will probably greatly affect how the bounding function is written. If I <strong>had</strong> to choose between having the <code>.drag</code> class or the <code>.bound</code> class not need a certain type of <code>position</code>, I would choose that the <code>.bound</code> class be set to any kind of positioning.</p> <p>Thank you all for reading and helping! It means a lot to me; I'm a full time (boarding) high school student with very little free time =/</p> <p>EDIT:</p> <p>I should note that I'm on my tenth day of learning Javascript- or fifteenth-hour depending on how you look at it, and I would like to learn the language before I start using libraries like jQuery. This engine is an academic exercise I've made for myself for the sake of knowledge and learning the language =]</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