How can I prevent divs from overlapping? Below are my CSS, script, and HTML:
///css
#body {
background-image: url('images/marginup.jpg');
height: 734px;
width: 640px;
}
#body2 {
background-image: url('images/margindown.jpg');
height: 100px;
width: 640px;
}
#drag1 {
width: 636px;
height: 107px;
background-image: url('images/caliperupleft.png');
background-repeat: no-repeat;
}
#drag2 {
width: 636px;
height: 107px;
background-image: url('images/caliperdownleft.png');
background-repeat: no-repeat;
}
#drag4 {
margin-left: 430px;
margin-top: 102px
}
#drag5 {
margin-left: 432px;
margin-top: -50px
}
//// my script
$(document).ready(function() {
$("#drag3").hide();
$(".draggable").draggable({
containment : "parent"
});
$(document).mousemove(function(e){
$('#status').html(e.pageX +', '+ e.pageY);
});
});
/// my html body
.<div id="drag1" class="draggable" >
<img id="drag4" src="images\caliperupright.png"></img>
</div>
<div id="drag2" class="draggable">
<img id="drag5" src="images\caliperdownright.png"></img>
</div>
I need help ensuring that the contents of the two divs in the body can be dragged without overlapping. I attempted to create a function for ondrag that would stop dragging when overlap occurs, but it didn't work as expected. Any suggestions?