CODEWITHSUNDEEP
javascriptjquerycssdraggabledroppable
User970008
User970008

Reputation: 1155

Jquery Draggable and Droppable Z-Index with Relative Container or Fixed Panel

I am having a problem with Jquery Draggable and Droppable where the drag item is behind a fixed position side panel.

Draggable should be over the Side Panel

The parent draggable #gallery container has to have relative positioning because I am using Muuri for the grid layout.

  #gallery { position: relative; width: 65%; z-index:1 }

The side panel has a fixed position so that it can act like a slideout panel. If I put a z-index on the side panel it appears over the container as it should, but the drag item always appears behind it instead of respecting the higher z-index of the ui-dragging item. If I remove the z-index on the side panel, then the side panel obviously goes behind the container when it should be over the top.

#trash { position: fixed; z-index: 2; width: 200px; }

I set the drag item z-index in CSS.

.ui-draggable-dragging {z-index:4; }

I tried attaching the clone to the document and setting a zIndex:

$( "li", $gallery ).draggable({
      cancel: "a.ui-icon", 
      revert: "invalid", 
      containment: "document",
      helper: "clone",
      cursor: "move",
      zIndex: 5
    });

I am using one of the standard Droppable examples to simplify the example. I have removed Muuri from the example to rule that out.

Example: https://plnkr.co/edit/0SZ5Mjanh6sowC2uVnjS

Upvotes: 0

Views: 2002

Answers (3)

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

It's easy to solve, update only one line code. please update your code add new CSS line 

#gallery,
#trash  { z-index: inherit !important; }

See Demo: https://plnkr.co/edit/Y3SwKJj0RZswlVKOnVhW?p=preview

Upvotes: 0

Esdras Xavier
Esdras Xavier

Reputation: 863

The problem is the parent element, he is under the thresh, a easy workaround would be change the parent z-index when you drag the element. Change your draggable function for the code below, should work just fine.

    // Let the gallery items be draggable
    $( "li", $gallery ).draggable({
      cancel: "a.ui-icon", // clicking an icon won't initiate dragging
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: "clone",
      cursor: "move",
      zIndex: 5,
      drag:function () {
        $(this).parent().css('z-index', '9999');
        $(this).removeClass('droped');
      },
      // removing the CSS classes once dragging is over.
      stop:function () {
        $(this).parent().css('z-index', '1');
        $(this).addClass('droped');
      },
    });

Upvotes: 0

Xenio Gracias
Xenio Gracias

Reputation: 2758

changed z-index of #trash to -1

#trash {
    width: 200px;
    min-height: 18em;
    padding: 1%;
    position: fixed;
    background: #e4e4e4;
    right: 0;
    top: 0;
    z-index: -1;
}

Upvotes: -1

Related Questions