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

经过多次尝试后我才想出来lol

这是更新的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();
    }
});

droppable draggable在移动时重叠div

1 个答案: