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

93

Pour une raison quelconque, l'espace réservé pour mes éléments 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 correspondre à l'élément déplacé?

jquery jquery-ui jquery-ui-sortable

— oshirowanen
source

Pouvez-vous le poster sur jsFiddle?

— samedi

Cela se produit-il lorsque vous faites simplement glisser et déposez votre élément vers un autre endroit? ou les éléments ont déjà cette hauteur après le chargement de la page? de toute façon, jetez un œil ici: bugs.jqueryui.com/ticket/4482 et essayez de contourner le problème comme mentionné

— Mohammad

250

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

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

Voir le cas de test mis à jour

— mekwall
source

21

J'ai personnellement dû remplacer ui.item.height () par ui.helper.outerHeight () en raison de problèmes avec les marges et le rembourrage faussant la hauteur réelle de l'élément

— oshikryu

désolé mais je ne pense pas que cela fonctionne bien, dans ce lien jsfiddle.net/t8gcZ/1 , la hauteur de l'espace réservé est la même que la hauteur de l'élément (237px) mais au moment du démarrage, nous pouvions voir l'élément sous-marin remonté d'une litière

— Makio

@Makio C'est à cause du rembourrage en bas. L'ajout de padding-bottom à l'espace réservé résout ce problème. jsfiddle.net/t8gcZ/136

— mekwall

15

Avez-vous essayé de définir la forcePlaceholderSize:truepropriété? Lisez la page de documentation triable de l'interface utilisateur jQuery .

— DarthJDG
source

2

J'ai essayé cela, mais l'ajout de vrai ou de faux ne fait aucune différence par rapport à mon site d'origine qui le maintient à 10 px de haut. dans ce jsfiddle, il se redimensionne correctement, mais forceplaceholdersize défini sur true ou false ne fait aucune différence. jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen: Dans quel navigateur le testez-vous?

— DarthJDG

@oshirowanen: Pouvez-vous publier un lien vers le code où il est réellement cassé?

— DarthJDG

2

Cela fonctionne pour moi. Tout ce que j'avais à faire était de changer le CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }en .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(supprimez donc la hauteur) Donc @DarthJDG vous avez raison!

— JP Hellemons

@JPHellemons qui ne fonctionne que si la hauteur n'est pas dynamique

— Erdal G.

2

Sont 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. L'ajout display: blockà la .portletclasse le corrige.

— Gijs
source

Il en va de même pour les éléments flottants. Si les éléments de la liste flottent, l'espace réservé doit également flotter.

— Adrian Marinica

2

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

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

— Elanchezhian Narayanasamy
source

1

Vous pouvez définir un style pour votre espace réservé comme option pour votre triable.

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

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

— MANATTWeb
source

2

Mais cela ne règle-t-il pas la hauteur? J'ai besoin que la hauteur soit la même que le contenu.

— oshirowanen

1

Dans mon cas, j'ai trouvé une solution similaire à JP Hellemons , dans laquelle je force la hauteur de l'espace réservé (avec ! Important ) à la personnalisation et définit également la visibilité avec l'arrière-plan pour voir les changements par moi-même (vous pouvez également styliser de cette manière 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

— user3780666
source