problème de hauteur d'espace réservé triable jQuery

Question

Pour une raison quelconque, l'espace réservé pour mes éléments triables est d'environ 10 px. Tous mes articles triables ont des hauteurs différentes. Comment puis-je modifier la hauteur de chaque espace réservé pour correspondre à l'élément déplacé?

Answer 1

Je résous généralement ce problème en liant un rappel qui définit la hauteur de l'espace réservé sur la hauteur de l'élément en cours de tri sur l'événement start . C'est une solution simple qui vous permet de contrôler avec précision le mode d'affichage de votre espace réservé.

 $( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});
 

Voir le cas de test mis à jour

Answer 2

Avez-vous essayé de définir la propriété forcePlaceholderSize:true ? Consultez la page de documentation de jQuery UI Sortable.

Answer 3

Vos éléments sont-ils display: block ? Les éléments en ligne peuvent empêcher l’espace réservé de conserver la hauteur correctement. Par exemple. ce jsFiddle semble avoir un problème similaire à celui que vous avez décrit. Ajouter display: block à la classe .portlet corrige.

Answer 4

Vous pouvez définir un style pour votre espace réservé en tant qu’option pour le triable.

 $( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});
 

Et juste donner à ce style une hauteur. J'espère que ça marche.

Answer 5

Dans mon cas, j'ai trouvé une solution similaire à celle de JP Hellemons , dans laquelle je force la taille de l'espace réservé (avec ! Important ) à la personnalisation, ainsi que la visibilité de l'arrière-plan pour voir les modifications pour moi-même (vous pouvez aussi styler votre espace réservé de la manière que vous voulez ).

Cela fonctionne aussi avec display: inline-block;

 .ui-sortable-placeholder { 
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
     }                    // in my case it was bottom -10px