부모에게 mousedown div 봉쇄

Question

내 내부 div mousemove에 마우스 커서를 사용하여 주위에 움직이는 것 같아요하지만 그것을 원활하게 끌 수 있도록 isDragging 변수로 끌고있다면 그것은 if 문에서 중지하고 싶습니다하지만 그것은 어떤 제안을 멈추지 않을 것 같습니다 도움이 업데이 트를 감상 할 수있다 : jsFiddle

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 > offset.left + ($(red).width()/2) && e.pageX < offsetWidth - ($(red).width()/2) 
     && e.pageY > offset.top + ($(red).height()/2) && e.pageY < offsetHeight - ($(red).height()/2) && !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; 
     } 
    }); 
}); 


<div id="yellow"> 
    <div id="red"></div> 
</div> 

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

#red { 
position: absolute; 
width: 100px; 
height: 100px; 
background-color: red; 
z-index: 100; 
} 

Answer 1

나는이 솔루션의 자랑스럽게 말할 수 있지만이 물건을 끝내야 할 것 같다

http://jsfiddle.net/pPn3v/42/

var yellow = $('#yellow'); 
var offset = yellow.offset(); 
var offsetWidth = offset.left + yellow.width(); 
var offsetHeight = offset.top + yellow.height(); 

var red = $('#red'); 

yellow.on('mousemove', function (e) { 
    if(e.pageX+red.width() < offsetWidth 
     && e.pageY+red.height() < offsetHeight){ 
     red.css("left", e.pageX); 
     red.css("top", e.pageY); 
    } 
}); 

red.on('mousemove', function (e) { 
    if(e.pageX+red.width() < offsetWidth 
     && e.pageY+red.height() < offsetHeight){ 
     red.css("left", e.pageX); 
     red.css("top", e.pageY); 
    }    
});