讓DIV的一部分在移出另一個DIV時消失？（CSS，JQuery，HTML）

Question

我有兩個DIV。其中一個DIV位於另一個DIV內部，可通過JQuerys draggable移動。現在我想實現的是，當我將DIV 2移出DIV 1時，DIV 1以外的部分應該消失。當您將其移回內部時，它會再次出現。什麼是最優雅的方式來處理？

Answer 1

您可以設置overflow: hidden到容器元素

$(function() { 
 
    $("#draggable").draggable(); 
 
});

#draggable { 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0.5em; 
 
} 
 
.x { 
 
    width: 250px; 
 
    height: 250px; 
 
    overflow: hidden; 
 
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css"> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> 
 

 

 
<div class="x ui-widget-content"> 
 
    <div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me around</p> 
 
    </div> 
 
</div>