JavaScript/jQuery: Animierte li Bewegung innerhalb einer Liste?

Question

Ich habe einige Code bekam, die hier auf die jQuery UI Sortable Beispiel im Grunde identisch ist:

http://jqueryui.com/demos/sortable/#default

Diese ermöglicht es Benutzern innerhalb eines UL LI-Elemente neu zu ordnen. Ich bin jetzt aber in eine Situation geraten, in der ich die LI-Position verändern möchte ... im Grunde so, als hätte der Benutzer sie selbst mitgeschleppt. Dies erweist sich als viel schwieriger, als ich erwartet hatte, da ich eine Änderung, die in CSS ausgedrückt werden kann, nicht animiere, sodass jQuerys animate() nicht helfen wird.

I könnte das Problem lösen, indem Sie ein wenig Mathe und absolut Positionierung der Liste Elemente, aber das scheint geradezu hässlich. Gibt es eine elegante Möglichkeit, meine Listenelemente zu animieren?

Answer 1

Ich bin mir nicht sicher, ob dies Ihnen helfen wird, aber ich habe ein Skript zum Animieren eines Objekts geschrieben, nachdem es in this paste bin gezogen wurde.

Im Wesentlichen animieren Sie den Klon, nachdem das Element fallen gelassen wird:

$("#droppable").droppable({ 
    drop: function(e, ui) { 
    $(this).addClass('ui-state-highlight'); 
    var x = ui.helper.clone(); 
    x.appendTo('body') 
    // move clone to original drag point 
    .css({position: 'absolute',top: ui.draggable.position().top,left:ui.draggable.position().left}) 
    .animate({ 
    // animate clone to droppable target 
    top: $(this).position().top, left: $(this).position().left}, 
    // animation time 
    1500, 
    // callback function - once animation is done 
    function(){ 
     x.find('.caption').text("I'm being munched on!"); 
     ui.draggable.addClass('fade'); 
     // remove clone after 500ms 
     setTimeout(function(){ x.remove(); }, 500) 
    } 
    ); 
    // remove the helper, so it doesn't animate backwards to the starting position (built into the draggable script) 
    ui.helper.remove(); 
    } 
}); 

Answer 2

Ich würde einen Helfer erstellen div und animiere das in Position, dann verschiebe die tatsächliche li und zerstöre den Helfer.

Sie können $('#li').clone() verwenden, um Ihren Helfer zu füllen, dann positionieren Sie den Helfer div mit der Position von $('#li'). offset(). Animiere den Helfer an die neue Position ($('#target').offset()), zerstöre den Helfer (.remove()) und ordne dann deine <li> s neu.

Answer 3

Sie sollten Quicksand überprüfen, die Sie einen anderen Satz von <li> Knoten angeben können die aktuellen, mit zu ersetzen und es wird handhaben was auch immer Animation ist notwendig, um die bestehende Liste in die neue zu transformieren.

Die Bibliothek erwartet Sie eine andere <ul> oder <ol> um sich zu haben (die Sie versteckt vom Benutzer halten würde), um die neue Ordnung zu vertreten, aber man konnte die Erstellung einer temporären Liste zu diesem Zweck, so dass der Client-Code automatisieren kann nur einen neuen Auftrag für die gleichen Knoten liefern. Es muss jedoch die Knoten irgendwie mit neuen austauschen, was zu Komplikationen führen kann, wenn Ihr Code erwartet, dass die Knoten gleich bleiben.