Jquery 移动时，可下拉可拖动是重叠的div

当我将两个div移动到下降区，然后移动到彼此的顶部时，底部的一个变为顶部的一个，然后当我移动顶部的一个时，它会做同样的事情

我怎样才能阻止这种情况发生，所以如果我想要底部的蓝色和顶部的红色div，此时红色跳跃会跳到蓝色跳跃的下方。但我不能让它停止这样做

这是JSFIDLE

这是密码

$(document).ready(function(){
    $('.box').draggable({
        helper: "clone"
    });

    $('#main').droppable({

        drop: function (e, ui) {

            x = ui.helper.clone();

            //x.removeClass("display").addClass("area");
            x.find('.ui-resizable-handle').remove();
            x.draggable({
                containment: '#main',
            }).resizable({
                containment: "#main"
            });

            x.css({ top:ui.offset.top, left: ui.offset.left});

            x.appendTo('#main');
            ui.helper.remove();

            //editDataTypes();
        }
    });
});

---

经过多次尝试，我终于明白了，哈哈

以下是更新的JSFIDLE

---

@斯瑞：为什么你看不出有什么不同？@rageit可能是我没有仔细研究。我接受我的错误并删除我的评论。

$("#main").droppable({
    tolerance: "pointer",
    drop: function(event, ui){
        var ud = ui.draggable;
        if( ud.draggable( "option", "helper" ) == "clone" ){
            ud.clone().removeClass("display").addClass("area")
            .appendTo("#main")
                .css({
                    position: 'absolute',
                    left: ui.offset.left,
                    top: ui.offset.top
                })
                .resizable()
                .draggable({cursor: "move", containment: '#main'})
                //editDataTypes();
        }else{
        ud.css({
                position: 'absolute',
                left: ui.offset.left,
                top: ui.offset.top
            })
        }
    },
    out: function(event, ui){
        ui.draggable.remove();
    }
});