web-dev-qa-db-fra.com

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

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

jqueryjquery-uijquery-ui-sortable
90
oshirowanen

Je résout généralement ce problème en liant un rappel qui définit la hauteur de l'espace réservé à la hauteur de l'élément en cours de tri à l'événement start . C'est une solution simple qui vous donne un contrôle précis sur la façon dont vous souhaitez que votre espace réservé soit affiché.

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

Voir scénario de test mis à jour

238
mekwall

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

15
DarthJDG

Vos éléments 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 au .portlet classe le corrige.

2
Gijs

Dans mon cas, j'ai trouvé une solution similaire à JP Hellemons , dans laquelle je force la hauteur de l'espace réservé (avec ! Important ) pour personnaliser et également définir la visibilité avec l'arrière-plan pour voir les changements par moi-même (vous pouvez également styler de cette façon votre espace réservé comme vous le souhaitez).

Cela fonctionne également 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
1
user3780666

Au lieu d'utiliser "ui.item.height ()", vous pouvez également utiliser "ui.helper [0] .scrollHeight" pour obtenir un résultat stable lorsque vous faites glisser un élément du conteneur externe également.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});
1
Elanchezhian Narayanasamy

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

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

Et donnez simplement une hauteur à ce style. J'espère que cela fonctionne.

1
MANATTWeb