div가있는 이미지가 사라지는 것을 멈추는 방법은 무엇입니까?

나는 이것을 site/webapp으로 만들었으며 페이지의 아무 곳이나있는 공백에서 양파를 드래그 할 수 있지만 왼쪽의 버튼을 클릭하면 나머지 div가있을 때 사라집니다. 사용자가 흰색 상자 밖으로 끌면 사라지지 않게하려면 어떻게해야합니까? 그들을 표시div가있는 이미지가 사라지는 것을 멈추는 방법은 무엇입니까?

<button id="button">&lt;-&gt;</button> 
    <aside class="ingredients" id="toggle"> 
     <section class="center"> 
      <section class="onion" id="draggable"></section> 
      <section class="butter"></section> 
     </section> 
    </aside>

섹션 만들기 위해 배경 이미지를 사용합니다 :

는 내가 외출에 밀어하기 위해 jQuery를 사용 :

$("#button").click(function() { 
     $("#toggle").toggle("slide"); 
    });

이 HTML은 작동하도록

.onion { 
    background-image: url(onion.png); 
    margin: 20px auto -300px auto; 
} 

.choppedonion { 
    background-image: url(choppedonion.png); 
}

출처

2013-11-09 Anonymous

을 찾을 수 있습니다. – hayavuk

드래그를 위해 내장 된 JQuery 옵션을 사용해보십시오.

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Draggable </title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

     <style> 
      #draggable { width: 150px; height: 150px; padding: 0.5em; } 
     </style> 
     <script> 
      $(function() { 
      $("#draggable").draggable(); 
     }); 
     </script> 
    </head> 
    <body> 
     <div id="draggable" class="ui-widget-content"> 
      <p>Drag me around</p> 
     </div> 
    </body> 
</html>

는 자사의 왼쪽 오프셋 대신 토글의 애니메이션에 의해 왼쪽 toggle` 옆 #`슬라이딩 시도 관련 문서를 here

출처

2013-11-09 19:40:18

div가있는 이미지가 사라지는 것을 멈추는 방법은 무엇입니까?

답변

관련 문제