jquery problema di altezza segnaposto ordinabile

93

Per qualche motivo il segnaposto per i miei articoli ordinabili è di circa 10px. Tutti i miei articoli ordinabili hanno altezze diverse. Come posso modificare l'altezza di ogni segnaposto in modo che corrisponda all'elemento che viene spostato?

jquery jquery-ui jquery-ui-sortable

— oshirowanen
fonte

Puoi postarlo su jsFiddle?

— Satish

È successo quando trascini semplicemente il tuo oggetto in un altro posto? oppure gli articoli hanno già questa altezza dopo aver caricato la pagina? comunque dai un'occhiata qui: bugs.jqueryui.com/ticket/4482 e prova a risolvere il problema come accennato

— Mohammad

250

Di solito risolvo questo problema associando un callback che imposta l'altezza del segnaposto all'altezza dell'elemento da ordinare startall'evento. È una soluzione semplice che ti offre un controllo dettagliato su come desideri che venga visualizzato il segnaposto.

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

Vedi il caso di test aggiornato

— mekwall
fonte

21

Personalmente ho dovuto sostituire ui.item.height () con ui.helper.outerHeight () a causa di alcuni problemi con i margini e il riempimento che distorcono l'altezza effettiva dell'elemento

— oshikryu

scusa ma non penso che funzioni bene, in questo link jsfiddle.net/t8gcZ/1 , l'altezza del segnaposto è uguale all'altezza dell'elemento (237px) ma all'inizio, abbiamo potuto vedere l'oggetto sotto spostato su una cucciolata

— Makio

@Makio Questo è a causa del fondo imbottito. L'aggiunta di padding-bottom al segnaposto risolve questo problema. jsfiddle.net/t8gcZ/136

— mekwall

15

Hai provato a impostare la forcePlaceholderSize:trueproprietà? Leggi la pagina della documentazione di jQuery UI Sortable .

— DarthJDG
fonte

2

l'ho provato, ma l'aggiunta di true o false non fa differenza per il mio sito originale che lo mantiene a 10px alto. in questo jsfiddle, si ridimensiona correttamente, ma forceplaceholdersize impostato su true o false non fa differenza. jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen: con quale browser lo stai provando?

— DarthJDG

@oshirowanen: puoi pubblicare un link al codice dove è effettivamente rotto?

— DarthJDG

2

Questo funziona per me. Tutto quello che dovevo fare era cambiare il CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }in .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(quindi rimuovi l'altezza) Quindi @DarthJDG hai ragione!

— JP Hellemons

@JPHellemons che funziona solo se l'altezza non è dinamica

— Erdal G.

2

Sono i tuoi elementi display: block? Gli elementi in linea potrebbero impedire al segnaposto di mantenere l'altezza correttamente. Per esempio. questo jsFiddle sembra avere un problema simile a quello che hai descritto. L'aggiunta display: blockalla .portletclasse lo risolve.

— Gijs
fonte

Lo stesso vale per gli elementi fluttuanti. Se gli elementi dell'elenco sono mobili, anche il segnaposto dovrebbe essere mobile.

— Adrian Marinica

2

Invece di usare "ui.item.height ()" puoi usare "ui.helper [0] .scrollHeight" per stabilizzare il risultato quando trascini un elemento anche da un contenitore esterno.

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

— Elanchezhian Narayanasamy
fonte

1

Puoi impostare uno stile per il tuo segnaposto come opzione per il tuo ordinabile.

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

E dai un'altezza a quello stile. Spero che funzioni.

— MANATTWeb
fonte

2

Ma questo non aggiusterà l'altezza? Ho bisogno che l'altezza sia la stessa del contenuto.

— oshirowanen

1

Nel mio caso ho trovato una soluzione simile a JP Hellemons , in cui sto forzando l'altezza del segnaposto (con ! Important ) su personalizzata e anche impostando la visibilità con lo sfondo per vedere i cambiamenti per me stesso (inoltre puoi modellare in questo modo il tuo segnaposto comunque vuoi ).

Funziona anche con 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