Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The first thing I noticed is that you didn't have a minimum boundary. You'll need that in order to enforce the upper AND lower bound. </p> <p><em>What is the correct math for setting the bounding box and why?</em></p> <p>First thing is that <code>dragObj</code> needs to account for both boundaries (applies to <code>position: absolute</code>):</p> <pre><code>// parentNode is our bounding box // the minimum boundary is based on the top left corner of our container obj.minBoundX = e.parentNode.offsetLeft; obj.minBoundY = e.parentNode.offsetTop; // the maximum is the bottom right corner of the container // or.. the top left (x,y) + the height and width (h,y) - the size of the square obj.maxBoundX = obj.minBoundX + e.parentNode.offsetWidth - e.offsetWidth; obj.maxBoundY = obj.minBoundY + e.parentNode.offsetHeight - e.offsetHeight; </code></pre> <p>Enforcing the boundaries is a simple update to <code>freeMovement</code>:</p> <pre><code>dragObj.element.style.left = Math.max(dragObj.minBoundX, Math.min(event.clientX - dragObj.posX, dragObj.maxBoundX)) + "px"; dragObj.element.style.top = Math.max(dragObj.minBoundY, Math.min(event.clientY - dragObj.posY, dragObj.maxBoundY)) + "px"; </code></pre> <p><em>Can I get rid of the position: relative in the .bound class?</em> Yup.</p> <p><em>Can I make .drag class not position: absolute?</em> Yup. You'll just want to change your positions to be relative and your calculations to account for this. For example, your minimum bound will now be 0.</p> <pre><code>// parentNode is our bounding box // the minimum boundary is based on the top left corner of our container obj.minBoundX = 0; obj.minBoundY = 0; </code></pre> <p>Here is the JSFiddle for the <code>position:absolute</code> version: <a href="http://jsfiddle.net/feWcQ/">http://jsfiddle.net/feWcQ/</a> (works with Firefox 4). I also added two tiny boxes that show your boundaries. Hopefully my answer helps you!</p>
    singulars
    1. This table or related slice is empty.
    1. POHow can I set a "bounding" area for my drag-able object in javascript?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USKit Menke
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow can I set a "bounding" area for my drag-able object in javascript?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThank you sooooo much! I'm going to look through everything to make sure I understand it.
      singulars
      1. PO
      1. USDbz
    2. COSo, I have a bunch of questions! It appears the bounding box is set to be the parent element by default. Before I was preforming a check to find the correct parent element to use as a bounding box. Can I still do that? -Even if there is **any** type of position set (and how)? Also, how do I account for setting the `.drag` and `.bound` class to any type of positioning? What's the math like?
      singulars
      1. PO
      1. USDbz
    3. COSure you can still do that! You probably want to check `object.style.position` and then perform your calculations. When it is `relative`, then minBoundX and minBoundY would be 0 (as I have above).
      singulars
      1. PO
      1. USKit Menke
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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