嗨，我想避免 div 重叠。这是我的 css、脚本和 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>
我想拖动正文中两个 div 的内容。但是当它们相遇时，应该停止拖动（不是在 mouseup 上而是在拖动时）。我尝试为 ondrag 编写一个函数以在发生重叠时停止拖动但是它没有用。请帮忙。