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?
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?
Risposte:
Di solito risolvo questo problema associando un callback che imposta l'altezza del segnaposto all'altezza dell'elemento da ordinare start
all'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
Hai provato a impostare la forcePlaceholderSize:true
proprietà? Leggi la pagina della documentazione di jQuery UI Sortable .
.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!
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: block
alla .portlet
classe lo risolve.
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);
}
});
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.
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