10

jQueryUI tiene un buen complemento, ordenable: http://jqueryui.com/demos/sortable/ Estoy muy satisfecho con ese complemento, pero me falta una sola cosa. Y eso es, en lugar de dejar que los elementos que cambian de posición salten a su nueva posición, me gustaría que se "deslicen" a esa nueva posición. En otras palabras, hazlo un poco más suave.jquery complemento ordenable con "efecto deslizante"?

He buscado en la red durante tres días y no he encontrado un complemento que haga eso (!?! ??). Quiero decir, vamos, debe haber uno, ¿verdad?

También intenté modificar el código un poco por mi cuenta, y lo hice funcionar en cierta forma (al clonar el elemento, deslizar el clon a la nueva posición y luego eliminar el clon. Mientras tanto, ocultar el elemento original y mostrarlo después de eliminar el clon). Pero no funciona muy bien, ¡y pensé que debía haber uno mejor en alguna parte!

Así que realmente estoy pidiendo ayuda. Ya sea modificando ayuda, o si usted ha visto un plugin que hace esto, por favor (:

+0

Me di cuenta ahora por qué mi método "no funciona". Parece que si estoy arrastrando mi elemento demasiado rápido, el script jquery-ui no se da cuenta de que incluso lo arrastré, jajaja. Incluso descargué una nueva copia (solo para estar seguro) y traté de arrastrarla muy rápido sobre las otras, y algunas veces falla. Entonces hay un problema con el código original, entonces ... bleh – Eric

Respuesta

8

si mira el sortable demo with placehoder y usa el siguiente código para inicializar el ordenable verás un deslizamiento de CA ción en el marcador de posición

$(function() { 
    $("#sortable").sortable({ 
    placeholder: 'ui-state-highlight', 
    start: function (e,ui){  // new lines to 
     $(ui.placeholder).slideUp(); // remove popping 
    },        // effect on start 
    change: function (e,ui){ 
     $(ui.placeholder).hide().slideDown(); 
    } 
    }); 
    $("#sortable").disableSelection(); 
}); 

puede cambiar la clase ui-estado más destacado a lo que quiera con el estilo de ella, puede hacerlo invisible mediante el uso de la visibilidad CSS-propiedad y configurarlo para que oculta

i hecho el ejemplo básico en jsbin.com para que pueda ver lo que su gusto

EDIT: example con el efecto que hace estallar eliminado cuando comience clasificación

+0

¡Es una buena forma de hacerlo! Solo una cosa.Cuando lo ocultes, todos los elementos "debajo" del marcador de posición saltarán al lugar donde estaba el marcador de posición, y luego comenzarán a deslizarse hacia abajo. ¿Hay alguna manera de "cerrarlos" más o menos? Porque parece muy divertido si arrastras el 5to sobre el 4to elemento en tu ejemplo ... – Eric

+0

Seguro edité en el código y agregué un ejemplo – Ties

+0

Funciona muy bien cuando se arrastra, pero cuando se arrastra el marcador de posición simplemente desaparece dando un salto/apariencia apagada. ¿Hay alguna manera de detectar el arrastre? –

0
  1. se puede controlar con las opciones eventos comprobarlos hacia fuera ...
  2. becareful con la cola porque si. arrastrar un elemento y luego arrastrar el otro withouth el primero de acabado que se ve gracioso.
  3. yo le recomendaría leer sobre .Stop(), cola de JQ, y posiblemente "cancelar la burbuja"
+0

Ah ok, tal vez sea 'mejor' usar los eventos. ¿Pero a qué te refieres con "controlarlo"? Los objetos son estáticos, por otras palabras, no se pueden mover en la página de forma dinámica a menos que cambie la propiedad a fija/absoluta, y eso crea un montón de problemas. – Eric

+0

quiero decir que puede usar 'start: function() { ...} 'para crear un elemento fantasma y luego use' drag: function() {...} 'para mover el fantasma y finalmente use' stop: function() {...} 'para destruir el fantasma y luego deslice el original a la posición final. o algo así. – Val