0
votes

Jquery Glissable et Droppable Z-Index avec conteneur relatif ou panneau fixe

J'ai un problème avec jQuery druggable et dressable où l'élément de glissement est derrière un panneau latéral de position fixe.

Le conteneur d 'agglambable parent #Gallery doit avoir un positionnement relatif car j'utilise muuri pour la disposition de la grille. P>

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

javascript jquery css draggable droppable

0 commentaires

3 Réponses :

-1
votes

a changé z-index de #trash en -1

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

1 commentaires

Cela ne fonctionne pas. Le panneau latéral de la corbeille doit être au-dessus du conteneur principal #gallery.

0
votes

Le problème est l'élément parent, il est sous le seuil , une solution simple serait de changer le z-index parent lorsque vous faites glisser l'élément. Modifiez votre fonction déplaçable pour le code ci-dessous, cela devrait fonctionner correctement.

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

4 commentaires

Je vois ce que vous voulez dire, cependant, cela ne fonctionne pas car cela rend toute la superposition #gallery sur le dessus du panneau latéral. Le panneau latéral doit toujours être au-dessus de la galerie.

Je vois, je le savais, mais je pensais que ce n'était pas un problème: p

Existe-t-il un moyen d'attacher le clone à un élément parent différent? Je pensais que c'était ce que faisait la propriété 'containment' - affecter le clone au document racine.

Ce serait une voie à suivre, mais je pense que vous résolvez déjà votre problème

0
votes

C'est facile à résoudre, ne mettez à jour qu'un code de ligne. veuillez mettre à jour votre code ajouter une nouvelle ligne CSS

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

Voir la démo: https://plnkr.co/edit/Y3SwKJj0RZswlVKOnVhW?p=preview

4 commentaires

Salut, cela ne fonctionne pas. Si vous réduisez la fenêtre de sorte que le panneau latéral #trash recouvre le conteneur #gallery, le conteneur tremblera et bégayera lorsque l'élément glissé est déplacé.

Il y a en fait deux problèmes. Étapes pour reproduire les problèmes: 1) Réduisez la fenêtre pour que #trash soit au-dessus de #gallery. 2) Passez la souris sur la #trash. La galerie apparaît au-dessus de la corbeille. Pour le bégaiement, 2) Faites glisser un élément sur la corbeille mais ne le relâchez pas. 3) Tout en maintenant la souris gauche enfoncée, déplacez le curseur avec l'élément de glissement de haut en bas sur la zone de chevauchement. La corbeille et la galerie font clignoter l'index z d'avant en arrière. Testé dans FF et Chrome les plus récents.

S'il vous plaît examiner encore mes ans

Oui, changer pour hériter l'a fait fonctionner sans bégayer. Merci