Jak naśladować zdarzenie sortowania z animacją za pomocą jQuery?

Question

Mam listę przedmiotów, z których każda zawiera pole wyboru. Po zaznaczeniu pola wyboru chciałbym, aby ten element został posortowany na początku listy, najlepiej animowany tak, jakby był przeciągany za pomocą myszy (ale bez kursora myszy).

Czy to możliwe? W przeszłości miałem problemy z uruchamianiem przeciągalnych/sortowalnych zdarzeń. Jestem otwarty na alternatywne rozwiązania, po prostu musi być oczywiste, gdzie element został przeniesiony.

Edytuj: Początkowo próbowałem zapytać, jak zrobić to na liście sortowalnej jQuery(), ale oczywiście nie komunikowałem się tak dobrze, więc zaktualizowałem to pytanie, aby dopasować wszystkie wspaniałe odpowiedzi.

Answer 1

podobne do drugiego przykładu avetarman, ten skrzypce nie czeka na nowo zaznaczone pole, aby osiągnąć szczyt przed innymi te wziąć należne im miejsce. Zamiast tego, wszystkie one uzyskać animowane razem:

http://jsfiddle.net/ebiewener/Y5Mdt/1/

Ostatecznie, to wszystko o dawaniu wiersz ruszasz bezwzględną pozycję tak, że może ślizgać się nad innych wierszy, dając niezbędne CSS atrybuty te pozostałe wiersze, aby nie wyskoczyły natychmiast z miejsca, gdy wybrany wiersz zostanie usunięty z obiegu dokumentów z pozycjonowaniem bezwzględnym. Po wykonaniu tego, wybrany wiersz traci absolutne pozycjonowanie, ale jest dołączany na początku wierszy. Pozwala to na całkowite "zresetowanie" css, dzięki czemu można kontynuować wybieranie nowych wierszy.

Answer 2

jQuery ui ma animację transfer.

Szybkie jsfiddle tutaj.

Możesz użyć tego, aby imitować sortowanie, a następnie na wywołanie zwrotne przenieść faktyczne pole wyboru. Będę aktualizował wersję demo, kiedy wrócę do domu, aby użyć listy pól wyboru do sortowania.

Answer 3

Sprawdź to skrzypce. Nie ma tu wtyczki.

http://jsfiddle.net/bN8x6/

Sprawdź tę aktualizację, jak również. Używa względnego pozycjonowania. Podczas animacji trzymany jest symbol zastępczy.

http://jsfiddle.net/bN8x6/1/

Answer 4

Spróbuj tego.

$('#mytest li').click(function() { 
 
    var $this = $(this); 
 
    if ($this.children("input:checked")) { 
 
     $this.effect("transfer", { 
 
      to: $this.parent().find(":first-child") 
 
     }, 1000); 
 
     $this.remove(); 
 
     $(this).prependTo("#mytest"); 
 
    }  
 
});

.ui-effects-transfer { 
 
    border: 2px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script> 
 
<ul id="mytest"> 
 
    <li><input type="checkbox" id="check1" /><label for="check1">One</label></li> 
 
    <li><input type="checkbox" id="check2" /><label for="check2">Two</label></li> 
 
    <li><input type="checkbox" id="check3" /><label for="check3">Three</label></li> 
 
    <li><input type="checkbox" id="check4" /><label for="check4">Four</label></li> 
 
    <li><input type="checkbox" id="check5" /><label for="check5">Five</label></li> 
 
    <li><input type="checkbox" id="check6" /><label for="check6">Six</label></li> 
 
    <li><input type="checkbox" id="check7" /><label for="check7">Seven</label></li> 
 
    <li><input type="checkbox" id="check8" /><label for="check8">Eight</label></li> 
 
    <li><input type="checkbox" id="check9" /><label for="check9">Nine</label></li> 
 
    <li><input type="checkbox" id="check10" /><label for="check10">Ten</label></li> 
 
</ul>

Demo tutaj: http://jsfiddle.net/naveen/gLBjt/

Zastrzeżenie: Jest to zasadniczo port roztworu @redsquare. :)