mousedown div containment to parent(latest)
<p>My inner div is suppose to move around with the mouse cursor on mousemove but i want it to stop at the if statement if it is dragging with the isDragging variable so it will drag smoothly but it seems to not stop any suggestion and help would be appreciated
update: <a href="http://jsfiddle.net/pPn3v/47/" rel="nofollow">jsFiddle</a></p>

<pre><code>var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();
var isDragging = false;

var red = $('#red');

$('#red').hide();

yellow.on('mousedown', function(event) {    
    $('#red').show();  
});
yellow.on('mouseup', function(event) {
    $('#red').hide();        
});
yellow.on('mousemove', function (e) {

    if(e.pageX &gt; offset.left + ($(red).width() / 2) &amp;&amp; e.pageX &lt; offsetWidth - ($(red).width() / 2)
        &amp;&amp; e.pageY &gt; offset.top + ($(red).height() / 2) &amp;&amp; e.pageY &lt; offsetHeight - ($(red).height() / 2) &amp;&amp; !isDragging ){
        red.css("left", e.pageX - $(red).width() / 2 );
        red.css("top", e.pageY - $(red).height() / 2);
    }

    $('#red').draggable(
        {'containment':'#yellow',
         start:function(event, ui) {
            isDragging = true;
        },
        drag:function(event, ui) {
            isDragging = true;
        },stop:function(event, ui) {
            isDragging = false;
        }
    });
});


&lt;div id="yellow"&gt;
    &lt;div id="red"&gt;&lt;/div&gt;
&lt;/div&gt;

    #yellow {
position: absolute;    
width: 250px; 
height: 250px; 
background-color: Yellow; 
}

#red {
position: absolute;
width: 100px; 
height: 100px; 
background-color: red; 
z-index: 100; 
}
</code></pre>
