droppable draggable 移动时重叠 div

Posted 2023-05-08

【中文标题】droppable draggable 移动时重叠 div

【英文标题】：droppable draggable is overlapping divs when moved

【发布时间】：2014-10-05 15:58:51

【问题描述】：

当我将 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();
        
    );
);

【参考方案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();
    
);

【讨论】：

@sri 为什么你看不出有什么不同？

@rageit 可能是我没有正确调查它。我接受我的错误并删除我的评论。