jquery와 외부 다이빙의 가장자리를 때 div 이동 중지

나는 이미지와 함께 div가 있고 사용자가 div 내에서 그것에 대해 움직이기를 원하지만 나는 div 밖으로 나가고 싶지 않다. 는 DIV 여기 jquery와 외부 다이빙의 가장자리를 때 div 이동 중지

<style> 
#area{ 
    width: 500px; 
    height: 500px; 
    margin: auto; 
    clear: both; 
    background-color: red; 
    position: absolute; 
} 
#one{ 
    width: 29px; 
    height: 29px; 
    background-image: url("images/fighter.png"); 
    position: relative; 
    top: 50px; 
} 

button{ 
    float: left; 
    width: 50px; 
} 
.gameControls{ 
    margin: auto; 
    width: 150px; 
} 
.gameUp{ 
    margin: 0 0 0 50px; 
} 
.clear{ 
    clear: both; 
}

내 jQuery를 내 스타일이 사용됩니다 여전히 여기

를 원하는 부모 영역 DIV 밖에 나가서 내가 해달라고 페이지의 나머지 부분을 통해 이동합니다 이동으로 스크립트는

<script> 
    $(document).ready(function(){ 
     $('.gameUp').click(function(event){ 
      $("#one").animate({"top": "-=50px"}, "slow"); 
     }); 
     $('.gameLeft').click(function(event){ 
      $("#one").animate({"left": "-=50px"}, "slow"); 
     }); 
     $('.gameDown').click(function(event){ 
      $("#one").animate({"top": "+=50px"}, "slow"); 
     }); 
     $('.gameRight').click(function(event){ 
      $("#one").animate({"left": "+=50px"}, "slow"); 
     }); 
    }); 
</script>

그리고 내 몸의 코드를 사용

<div class="gameControls"> 
    <button class="gameUp">&uarr;</button> 
    <div class="clear"></div> 
    <button class="gameLeft">&larr;</button> 
    <button class="gameDown">&darr;</button> 
    <button class="gameRight">&rarr;</button> 
</div> 
<div id="area"> 
<div id="one"></div> 
</div>

출처

2013-03-19 Pierce McGeough

top, margin, padding 등을 음수 값에 할당 할 수 있기 때문에 CSS 만 사용해서는 안되는지 확신 할 수 없습니다.

이 내 JS 솔루션 :

jsfiddle

출처

2013-03-19 20:48:44 XiM

jquery와 외부 다이빙의 가장자리를 때 div 이동 중지

답변

관련 문제