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

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