避免css中DIV的重叠，在拖动时在conion上使用jquery

嗨，我想避免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>

///css
#身体{
背景图片：url（'images/marginup.jpg'）；
高度：734px；
宽度：640px；
}
#车身2{
背景图片：url（'images/margindown.jpg'）；
高度：100px；
宽度：640px；
}
#拖拉{
宽度：636px；
高度：107px；
背景图片：url（'images/calipreupleft.png'）；
背景重复：无重复；
}
#拖拉{
宽度：636px；
高度：107px；
背景图片：url（'images/caliperdownlight.png'）；
背景重复：无重复；
}
#拖拽{
左边距：430px；
利润上限：102px
}
#拖拽{
左边距：432px；
利润上限：-50px
}
////我的剧本
$（文档）.ready（函数（）{
$（“#drag3”）.hide（）；
$（“.draggable”）.draggable({
遏制：“家长”
});
$（文档）.mousemove（函数（e）{
$（'#status'）.html（e.pageX+，'+e.pageY）；
}); 
});
///我的html正文
.

---

---

我想在正文中拖动两个div的内容。但是当它们相遇时，拖动应该停止（不是在鼠标上，而是在拖动时）。我尝试为ondrag编写一个函数，在发生重叠时停止拖动，但没有成功。请帮助。

此站点可能会为您提供一些答案

可拖动对象具有参数控制

祝你好运