删除时，JQuery-UI可拖动元素会显示在其他元素之上

Question

我使用JQuery-UI能够将项目从一个div拖到另一个div，但是当我将该元素放在另一个div中时，它会显示在其他删除元素的顶部。我做错了什么？

        //These are my draggable elements
        $('#interface li').draggable({
            helper: 'clone',
            revert: 'invalid'
        });

        //This function makes dropped elements draggable again.
        function foo(){
            $('.foo').each(function() {
                $(this).draggable({
                    containment: $(this).parent(),
                    stack: '.foo'
                });
            });
        }

        //This function forms table around dropped item
        var fooCount = $('.foo').length;
        $('#mainDiv').droppable({
            drop: function(event, ui) {
                if (!ui.draggable.hasClass('foo')) {
                    var Class = ui.draggable.attr("class");
                    var title = ui.draggable.text().trim();
                    var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="'+(fooCount+1)+'"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
                    $(this).append(item);
                    fooCount += 1;
                    foo();
                }
            }
        });

这是我用于为新创建的表设置样式的CSS代码：

.foo {
    min-width: 250px;
    max-width: 300px;
    text-align: center;
    min-height: 50px;
    border: 1px solid white;
    border-radius: 10px;
    position: absolute;
    padding: 0;
}

但是丢弃的元素看起来像这样：

我希望它们看起来像这样：

编辑：这是一个有效的jsfiffle：https://jsfiddle.net/vaxobasilidze/79kd1uLL/

Answer 1

只需从新创建的元素中删除position: absolute;即可。它应该是

.foo {
    min-width: 250px;
    max-width: 300px;
    text-align: center;
    min-height: 50px;
    border: 1px solid white;
    border-radius: 10px;
    /*position: absolute;*/
    padding: 0;
}

检查更新的小提琴here