droppable draggable 移动时重叠 div

Question

当我将 div 移动到放置区域，然后在彼此顶部移动时，底部的一个变成顶部的，然后当我移动顶部的时它会做同样的事情。

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

这里是 jsfiddle http://jsfiddle.net/mvpkzzdt/

这里是代码

$(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();
        }
    });
});

Answer 1

经过多次尝试，我想通了，哈哈

这里是更新的 jsfiddle http://jsfiddle.net/mvpkzzdt/1/

$("#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();
    }
});