CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui-draggable
Vaxo Basilidze
Vaxo Basilidze

Reputation: 1057

JQuery-UI draggable elements appear on top of others when they are dropped

I'm using JQuery-UI to be able to drag items from one div to another, but when I drop the element in another div, it appears on top of other dropped elements. What am I doing wrong?

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

This is my CSS code for styling newly created tables:

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

But the dropped elements appear like this:

enter image description here

I want them to appear like this:

enter image description here

EDIT: Here is a working jsfiffle: https://jsfiddle.net/vaxobasilidze/79kd1uLL/

Upvotes: 0

Views: 95

Answers (1)

Super User
Super User

Reputation: 9642

Just remove position: absolute; from newly created element. It should be

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

Check updated fiddle here

Upvotes: 1

Related Questions