problema de altura do espaço reservado classificável jquery

93

Por algum motivo, o espaço reservado para meus itens classificáveis ​​é de cerca de 10 px. Todos os meus itens classificáveis ​​têm alturas diferentes. Como posso alterar a altura de cada espaço reservado para corresponder ao item que está sendo movido?

jquery jquery-ui jquery-ui-sortable Oshirowanen
fonte
Você pode postar no jsFiddle?
Satish
Isso aconteceu quando você apenas arrastou e soltou seu item para outro lugar? ou os itens já têm essa altura depois de carregar a página? de qualquer maneira, dê uma olhada aqui: bugs.jqueryui.com/ticket/4482 e tente contornar como mencionado
Mohammad

Respostas:

250

Normalmente resolvo isso vinculando um retorno de chamada que define a altura do espaço reservado para a altura do item que está sendo classificado para o startevento. É uma solução simples que oferece controle refinado sobre como deseja que o marcador de posição seja exibido.

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

Veja o caso de teste atualizado

mekwall
fonte
21
Eu pessoalmente tive que substituir ui.item.height () por ui.helper.outerHeight () devido a alguns problemas com margens e preenchimento distorcendo a altura real do elemento
oshikryu
desculpe, mas eu não acho que funcione bem, neste link jsfiddle.net/t8gcZ/1 , a altura do espaço reservado é igual à altura do item (237px), mas no momento inicial, pudemos ver o item inferior subiu um pouco
Makio
@Makio Isso é por causa do fundo acolchoado. Adicionar padding-bottom ao placeholder resolve isso. jsfiddle.net/t8gcZ/136
mekwall
15

Você já tentou definir a forcePlaceholderSize:truepropriedade? Leia a página de documentação do jQuery UI Sortable .

DarthJDG
fonte
2
Eu tentei isso, mas adicionar verdadeiro ou falso não faz diferença no meu site original, que o mantém com 10px de altura. neste jsfiddle, ele é redimensionado corretamente, mas forceplaceholdersize definido como true ou false não faz diferença. jsfiddle.net/t8gcZ
oshirowanen
@oshirowanen: Em qual navegador você está testando?
DarthJDG
@oshirowanen: Você pode postar um link para o código onde ele está realmente quebrado?
DarthJDG
2
Isso funciona para mim. Tudo que eu tive que fazer foi mudar o CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }para .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(então remova a altura) Então @DarthJDG você está certo!
JP Hellemons
@JPHellemons que só funciona se a altura não for dinâmica
Erdal G.
2

São seus elementos display: block? Elementos embutidos podem fazer com que o marcador de posição não mantenha a altura correta. Por exemplo. este jsFiddle parece ter um problema semelhante ao que você descreveu. Adicionar display: blockà .portletclasse corrige isso.

Gijs
fonte
O mesmo vale para elementos flutuantes. Se os elementos da lista forem flutuantes, o marcador de posição também deverá flutuar.
Adrian Marinica
2

Em vez de usar "ui.item.height ()", você pode usar "ui.helper [0] .scrollHeight" para estabilizar o resultado ao arrastar um item de um contêiner externo também.

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

Você pode definir um estilo para o seu espaço reservado como uma opção para sua classificação.

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

E apenas dê a esse estilo uma altura. Espero que funcione.

MANATTWeb
fonte
2
Mas isso não corrige a altura? Preciso que a altura seja igual ao conteúdo.
oshirowanen
1

No meu caso, encontrei uma solução semelhante ao JP Hellemons , em que estou forçando a altura do espaço reservado (com ! Importante ) para customizar e também configurando a visibilidade com o fundo para ver as alterações por mim mesmo (também você pode estilizar o seu espaço reservado da maneira que quiser )

Isso também funciona com 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
fonte