jquery - examples - sortable js
problema de altura de marcador de posición de jquery ordenable (6)
Por alguna razón, el marcador de posición para mis elementos ordenables es de aproximadamente 10 px. Todos mis artículos clasificables tienen diferentes alturas. ¿Cómo puedo cambiar la altura de cada marcador de posición para que coincida con el elemento que se mueve?
¿Has intentado configurar la propiedad forcePlaceholderSize:true ? Lea en la página de documentación ordenable de jQuery UI.
¿Se display: block tus elementos display: block ? Los elementos en línea pueden hacer que el marcador de posición no mantenga la altura correctamente. P.ej. este jsFiddle parece tener un problema similar al que describiste. Agregar display: block a la clase .portlet corrige.
En lugar de usar "ui.item.height ()", puede usar "ui.helper [0] .scrollHeight" para obtener un resultado estable al arrastrar también un elemento desde un contenedor externo.
$( ".column" ).sortable({
connectWith: ".column",
start: function(e, ui){
ui.placeholder.height(ui.helper[0].scrollHeight);
}
});
En mi caso, encontré una solución similar a JP Hellemons , en la que estoy forzando la altura del marcador de posición (con ! Important ) a la medida y también estableciendo la visibilidad con el fondo para ver los cambios por mí mismo (también puedes marcar de esta manera tu marcador de posición como quieras )
Esto también funciona 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
Puede establecer un estilo para su marcador de posición como una opción para su ordenable.
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
});
Y solo dale un estilo a ese estilo. Espero que eso funcione
Normalmente resuelvo esto vinculando una devolución de llamada que establece la altura del marcador de posición a la altura del elemento que se está ordenando para el evento de start . Es una solución simple que le da un control detallado sobre cómo desea que se muestre su marcador de posición.
$( ".column" ).sortable({
connectWith: ".column",
start: function(e, ui){
ui.placeholder.height(ui.item.height());
}
});