CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3877230
user3877230

Reputation: 458

Let a part of a DIV disappear when it moves out of another DIV?(CSS, JQuery, HTML)

I have two DIVs. One of those DIVs is inside of another and movable via JQuerys draggable. What i want to achieve now is that when i move DIV 2 out of DIV 1 that the part that is outside of DIV 1 should disappear. When you move it back inside it will appear again. What would be the most elegant way to handle that?

enter image description here

Upvotes: 1

Views: 982

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You can set overflow: hidden to the container element

$(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>

Upvotes: 2

Related Questions