title: jquery ui draggable restricting div to up and down drag within containment
body: <p>I have been learning Javascript lately. As an exercise I wanted to create a Dominoes board. I am trying to drag a tile around the board. The approach I took is to create a tile within the board and set it to <code>draggable</code> with jquery ui. 
  However, somehow the drag is confined to up and down movement only. Why is that??</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>   &lt;div id="board"&gt;
        &lt;div id="tile_1-0" &gt; 
          &lt;div class="dominoe"&gt; &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>.dominoe {
  /* Dominoe shape */
      position: relative;
      height:60px;
      width:30px;
      background-color:white;
      border: 2px solid black;
  
  /* Rounded Corners */
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding:2px;    
  }
  
  #board {
          margin: auto;
          width: 200px;
          height: 200px;
          background-color: #0A9D2D;
  }
  </code></pre>
  
  <p><strong>javascript:</strong></p>
  
  <pre><code>$( "#tile_1-0" ).draggable({containment:'#board'});
  </code></pre>
  
  <p>Please take a look at the embedded fiddle:
  <a href="https://jsfiddle.net/totoorozco/t5nnd95j/" rel="nofollow">https://jsfiddle.net/totoorozco/t5nnd95j/</a></p>