title: Draggable object "glued" to border
body: <p>I've created a user control that includes a label inside a draggable div, like this:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .text_label
  {
  
      margin-top:8px;
      font-size:18px;
      color:#545454;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      -border-radius: 2px;
  }
  
  .clear
  {
      clear:both;
      height:20px;
  }
  
  .drag
  {
      display:block;
  }
  
  &lt;/style&gt;
  
  &lt;div class="drag"&gt;
  &lt;asp:Label ID="lbl1" class="text_label" runat="server" Text="Click Me"/&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>For draggable I'm using the following option in the ready() function:</p>
  
  <pre><code>$('.drag').draggable("option", "containment", 'parent');
  </code></pre>
  
  <p>On my test web page I'm adding two of the user controls inside a panel.
  My goal is to make them draggable inside that panel.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .panel
      {
          border-style:solid;
          border-width:medium;
          width:100%;
  
      }
  
  &lt;/style&gt;
  &lt;asp:Panel runat="server" ID="p1" CssClass="panel"&gt;
      &lt;cc:UserControl1 runat="server" ID="Text1"  /&gt;
      &lt;cc:UserControl2 runat="server" ID="Text2" /&gt;
  &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>When I run the page (in Chrome), both controls are aligned to the right border of the panel are draggable only on the Y axis.</p>
  
  <p>Any idea why it happens and what is missing?</p>
  
  <p>Thank You.</p>