Jquery Arrastrar y colocar en listas anidadas: cómo minimizar/eliminar el parpadeo

Basado en http://jqueryui.com/demos/sortable/#placeholder Estoy trabajando en una interfaz de arrastrar y soltar que permite al usuario reorganizar listas anidadas. Como puede ver en the link, esto funciona muy bien en listas simples.Jquery Arrastrar y colocar en listas anidadas: cómo minimizar/eliminar el parpadeo

Sin embargo, cuando lo intento con listas anidadas, me sale bastante mal parpadeo. Pruébelo usted mismo en:

http://jsfiddle.net/unklefolk/G5xPE/

Después de mover algunos elementos internos a la lista externa y viceversa, verá que hay un poco de parpadeo/tramado sucediendo, especialmente en torno al punto en el que una combinación externa lista cumple y lista interna.

¿Qué puedo hacer para minimizar este parpadeo? ¿Hay algún cambio en jQuery o CSS que pueda hacer que reduzca este problema?

Fuente

2011-11-10 Mark Robinson

Echa un vistazo a este plugin se puede ordenar anidada. Es una lista de elementos impulsados, pero puede ser la respuesta a su problema.

nestedSortable jQuery Plugin

Fuente

2011-12-02 17:02:52 Brian

Gran enlace Brian. Este plugin se parece mucho más a lo que necesito. Ojalá hubiera encontrado esto hace varios meses. Es posible que no pueda utilizar esta solución, ya que estoy bastante lejos en la ruta jQuery UI y el tiempo es limitado, pero otorgaré a esta respuesta la recompensa, ya que parece la mejor solución para otros usuarios de SO que enfrentan este problema. –

Tuve un problema similar una vez, no tengo tiempo para adaptarlo, pero esta es mi solución.

Utilice una devolución de llamada js:

$(document).ready(function() { 
    var s = $("#sortable"); 
    s.sortable({ 
     tolerance: 'pointer', 
     stop: function(event, ui) { 
      var ranks = ['gold','silver','bronze']; 
      $("li",s).each(function (idx) { 
       for(var i = 0; i < ranks.length; ++i) $(this).removeClass(ranks[i]); 
       $(this).addClass(ranks[idx]); 
      }); 
     } 
    }); 
});

Se puede ver here in jsfiddle.net

Fuente

2011-11-10 14:26:15 Kyle

Gracias por el consejo, Kyle. Desafortunadamente, tomé tu violín, lo extendí a listas anidadas y todavía tengo el parpadeo mientras me muevo entre los niveles. http://jsfiddle.net/unklefolk/uueFC/ ¿No estoy seguro de si me falta algo? –

El violín que proporcionó no tiene una lista anidada :) – Kyle

Disculpas. Prueba esto: http://jsfiddle.net/unklefolk/uueFC/3/ Temo haber perdido las bonitas imágenes de la barra de chocolate, pero creo que en esencia es lo mismo. –

Por lo general, yo uso helper: 'clone' wich tiene algún impacto sobre este problema (nunca entendió por qué) .i no saben si funciona, en mi Firefox 8 se ve mejor

$(function() { 
    $(".sortable").sortable({ 
     placeholder: "ui-state-highlight", 
     connectWith: ".sortable", 
     helper: 'clone' 
    }); 
    $(".sortable").disableSelection(); 
});

http://jsfiddle.net/nicolapeluchetti/G5xPE/17/

Fuente

2011-12-02 17:11:01

Gracias por la respuesta, Nicola. No pareció tener mucho efecto en mi implementación, pero espero que esto ayude a otra persona. –

OP aquí. Solo quería publicar lo que finalmente hice para arreglar esto. Basado en http://bugs.jqueryui.com/ticket/4741?cversion=0&cnum_hist=8 I uncommented la línea siguiente en jquery-UI-1.8.6.js:

&& itemElement.parentNode == this.placeholder[0].parentNode // only rearrange items within the same container

todavía utilizo el atributo connectWith.

Ahora puedo arrastrar y soltar entre niveles en la jerarquía sin parpadeo. Espero que esto ayude a otros usuarios de SO.

Fuente

2011-12-22 08:55:44

Jquery Arrastrar y colocar en listas anidadas: cómo minimizar/eliminar el parpadeo

Respuesta

Cuestiones relacionadas