Yo all cool programming people out there. I am using jQuery draggable UI interface and I have a outer div with the ID #app, inside this div i have another div with the class #drag. This is being dragged. Inside this drag div i have more code for div's which is coding for a box.

When I use the:

containment: 'parent'

with draggable, it acts strangely. The thing I'm dragging around is just dragged VERTICALLY (Y). It is not being dragged horisontally (X). My code is looking like this:

Code:
<div id="app">

  <div id="0" class="drag" style="left:0px; top:289px; position: relative; z-index: 1;">

  <div id="top"></div>
  <div id="middle">Text</div>
  <div id="bottom"></div>

  <div style="clear:both;"></div>

  </div>

</div>

And the javascript (jquery) is like this:

Code:
$(function() {

  $(".drag").draggable({
  drag: function(event, ui) {
  $(".drag").css("opacity", "0.6");

  },

  stop: function(event, ui) {
  $(".drag").css("opacity", "1.0");
  },

  cursor: "move",
  containment: 'parent',
  stack: { group: '.drag', min: 1 }

  });

});
Do someone have a clue what might cause this problem? Could it be the divs inside the .drag div element?