problem z wysokością symbolu zastępczego z możliwością sortowania jquery

94

Z jakiegoś powodu element zastępczy dla moich sortowanych elementów ma około 10 pikseli. Wszystkie moje sortowane przedmioty mają różną wysokość. Jak mogę zmienić wysokość każdego symbolu zastępczego, aby pasował do przenoszonego elementu?

jquery jquery-ui jquery-ui-sortable oshirowanen
źródło
Czy możesz wysłać to do jsFiddle?
Satish
Czy dzieje się tak, gdy po prostu przeciągasz i upuszczasz przedmiot w inne miejsce? czy przedmioty mają już tę wysokość po załadowaniu strony? w każdym razie spójrz tutaj: bugs.jqueryui.com/ticket/4482 i spróbuj obejść ten problem, jak wspomniano
Mohammad,

Odpowiedzi:

254

Zwykle rozwiązuję ten problem, wiążąc wywołanie zwrotne, które ustawia wysokość symbolu zastępczego do wysokości sortowanego elementu ze startzdarzeniem. To proste rozwiązanie, które zapewnia precyzyjną kontrolę nad sposobem wyświetlania symbolu zastępczego.

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

Zobacz zaktualizowany przypadek testowy

mekwall
źródło
22
Osobiście musiałem zamienić ui.item.height () na ui.helper.outerHeight () z powodu pewnych problemów z marginesami i dopełnieniem, które wypaczają rzeczywistą wysokość elementu
oshikryu
przepraszam, ale nie sądzę, żeby to działało dobrze, w tym linku jsfiddle.net/t8gcZ/1 wysokość symbolu zastępczego jest taka sama jak wysokość elementu (237px), ale na początku mogliśmy zobaczyć element poniżej przeniesiony do miotu
Makio
1
@Makio To z powodu wyściółki na dole. Dodanie padding-bottom do symbolu zastępczego rozwiązuje ten problem. jsfiddle.net/t8gcZ/136
mekwall
16

Czy próbowałeś ustawić forcePlaceholderSize:truewłaściwość? Przeczytaj stronę z dokumentacją jQuery UI Sortable .

DarthJDG
źródło
2
Próbowałem tego, ale dodanie wartości true lub false nie ma znaczenia dla mojej oryginalnej witryny, która utrzymuje ją na wysokości 10 pikseli. w tym jsfiddle zmienia rozmiar poprawnie, ale forceplaceholderize ustawione na true lub false nie robi różnicy. jsfiddle.net/t8gcZ
oshirowanen
@oshirowanen: W jakiej przeglądarce to testujesz?
DarthJDG
@oshirowanen: Czy możesz opublikować link do kodu, w którym faktycznie jest uszkodzony?
DarthJDG
2
To działa dla mnie. Wszystko, co musiałem zrobić, to zmienić CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }na .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(więc usuń wysokość) Więc @DarthJDG masz rację!
JP Hellemons
@JPHellemons, który działa tylko wtedy, gdy wysokość nie jest dynamiczna
Erdal G.,
2

Czy twoje elementy display: block? Elementy wbudowane mogą spowodować, że symbol zastępczy nie będzie prawidłowo zachowywał wysokości. Na przykład. ten jsFiddle wydaje się mieć podobny problem do tego, który opisałeś. Dodanie display: blockdo .portletklasy rozwiązuje ten problem.

Gijs
źródło
To samo dotyczy elementów pływających. Jeśli elementy listy są ruchome, symbol zastępczy również powinien się znajdować.
Adrian Marinica
2

Zamiast używać „ui.item.height ()”, możesz użyć „ui.helper [0] .scrollHeight”, aby uzyskać stabilny wynik również podczas przeciągania elementu z zewnętrznego kontenera.

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

Możesz ustawić styl dla symbolu zastępczego jako opcję sortowania.

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

I po prostu nadaj temu stylowi wysokość. Mam nadzieję, że to zadziała.

MANATTWeb
źródło
2
Ale czy to nie naprawi wysokości? Potrzebuję, aby wysokość była taka sama jak zawartość.
oshirowanen
1

W moim przypadku znalazłem rozwiązanie podobne do JP Hellemons , w którym wymuszam wysokość symbolu zastępczego (z ! Ważne ) na niestandardową, a także ustawiam widoczność z tłem, aby zobaczyć zmiany dla siebie (również możesz w ten sposób stylizować swój element zastępczy tak jak chcesz ).

Działa to również z 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
źródło