Problema de altura de marcador de posición ordenable de jquery

93

Por alguna razón, el marcador de posición para mis elementos clasificables es de aproximadamente 10 px. Todos mis elementos 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?

jquery jquery-ui jquery-ui-sortable

— oshirowanen
fuente

¿Puedes publicarlo en jsFiddle?

— Sábado

¿Ocurrió esto cuando simplemente arrastras y sueltas tu artículo en otro lugar? o los artículos ya tienen esta altura después de cargar la página? de todos modos, eche un vistazo aquí: bugs.jqueryui.com/ticket/4482 e intente solucionarlo como se mencionó

— Mohammad

250

Por lo general, resuelvo esto vinculando una devolución de llamada que establece la altura del marcador de posición a la altura del elemento que se ordena para el startevento. Es una solución simple que le brinda 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());
    }
});

Ver caso de prueba actualizado

— mekwall
fuente

21

Personalmente tuve que reemplazar ui.item.height () con ui.helper.outerHeight () debido a algunos problemas con los márgenes y el relleno que sesgaban la altura real del elemento

— oshikryu

lo siento, pero no creo que funcione bien, en este enlace jsfiddle.net/t8gcZ/1 , la altura del marcador de posición es la misma que la altura del elemento (237 px) pero en el momento de inicio, pudimos ver que el elemento inferior se movió hacia arriba en una camada

— Makio

@Makio Eso es por el fondo acolchado. Agregar padding-bottom al marcador de posición resuelve esto. jsfiddle.net/t8gcZ/136

— mekwall

15

¿Ha intentado configurar la forcePlaceholderSize:truepropiedad? Lea la página de documentación de jQuery UI Sortable .

— DarthJDG
fuente

2

Lo he intentado, pero agregar verdadero o falso no hace ninguna diferencia en mi sitio original, que lo mantiene a 10 px de alto. en este jsfiddle, cambia de tamaño correctamente, pero forceplaceholdersize establecido en verdadero o falso no hace ninguna diferencia. jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen: ¿En qué navegador lo estás probando?

— DarthJDG

@oshirowanen: ¿Puedes publicar un enlace al código donde está realmente roto?

— DarthJDG

2

Eso funciona para mí. Todo lo que tuve que hacer fue cambiar el CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }a .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(así que elimine la altura) ¡Entonces @DarthJDG tiene razón!

— JP Hellemons

@JPHellemons que solo funciona si la altura no es dinámica

— Erdal G.

2

¿Son 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: blocka la .portletclase lo arregla.

— Gijs
fuente

Lo mismo ocurre con los elementos flotantes. Si los elementos de la lista son flotantes, el marcador de posición también debería flotar.

— Adrian Marinica

2

En lugar de usar "ui.item.height ()", puede usar "ui.helper [0] .scrollHeight" para obtener un resultado estable cuando también arrastre un elemento desde un contenedor externo.

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

— Elanchezhian Narayanasamy
fuente

1

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 toque a ese estilo. Espero que funcione.

— MANATTWeb
fuente

2

¿Pero eso no arreglará la altura? Necesito que la altura sea la misma que el contenido.

— oshirowanen

1

En mi caso, encontré una solución similar a JP Hellemons , en la que estoy forzando la altura del marcador de posición (con ! Importante ) a personalizado y también estableciendo la visibilidad con el fondo para ver los cambios por mí mismo (también puede diseñar de esta manera su marcador de posición de la forma que desee ).

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

— usuario3780666
fuente