CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Anna Gabrielyan
Anna Gabrielyan

Reputation: 2170

jQuery ui draggable element gets under other draggable elements

I have a style problem with jQuery Ui draggable elements. here what i have

FIDDLE

As u can see, i have two droppable areas , in each area elements are draggable, and can drag and drop element from one block to another The only problem here , that when i am dragging element from top block to below block, the dragging element gets under droppable are elements, but when i am dragging from bottom are to top there is no such problem.

Here is the code for dragging

$(".slide").draggable({
    // brings the item back to its place when dragging is over
    revert:true,
    // once the dragging starts, we decrease the opactiy of other items
    // Appending a class as we do that with CSS
    start: function(event, ui) { $(this).css("z-index", a++); },
    drag:function () {
        $(this).removeClass('droped');
    },
    // adding the CSS classes once dragging is over.
    stop:function () {
        $(this).addClass('droped');
    },
    zIndex: 10000,
    snapMode: "inner"
});

Can anybody help me please, i am working on it already 2 days, and can't figure out what is the problem, i have tried to change z-index positions of every block, but no result;

Upvotes: 3

Views: 2852

Answers (2)

Lothre1
Lothre1

Reputation: 3853

Avoid tricks and go with divs instead of UL or LI for further compatibility.

Also, you don't need to listen to the start event to setup the z-index property. The .draggable() api exposes the zIndex prop for that reason.

Here is the demo working:

http://jsfiddle.net/zbo7g5nz/8/

Upvotes: 1

Randy
Randy

Reputation: 9849

I found out that my code only worked the first time - i removed some z-indexes from your JQuery ánd your css, now it is working for me every time:

http://jsfiddle.net/zbo7g5nz/5/

My jFiddle doesnt seem to get updated to share.. Here is working code:

$(".slide").draggable({
        // brings the item back to its place when dragging is over
        revert:true,
        // once the dragging starts, we decrease the opactiy of other items
        // Appending a class as we do that with CSS
        start: function(event, ui) { $(this).css("z-index", a++); },
        drag:function () {
            $(this).parent().css('z-index', '10001');
            $(this).removeClass('droped');
        },
        // removing the CSS classes once dragging is over.
        stop:function () {
            $(this).parent().css('z-index', '10001');
            $(this).addClass('droped');
        },
        zIndex: 10000,
        snapMode: "inner"
    });

I gave a z-index to the ul holding the li that was higher than the li of the list that was below.

Upvotes: 2

Related Questions