Как имитировать событие сортировки с помощью анимации, используя jQuery? - PullRequest
Новая
       0

Как имитировать событие сортировки с помощью анимации, используя jQuery?

5 голосов
/ 08 августа 2011

У меня есть список предметов, каждый из которых содержит флажок.Когда флажок установлен, я бы хотел, чтобы этот элемент сортировался в начале списка, желательно с анимацией, как если бы его перетаскивали мышью (но без курсора мыши).

Возможно ли это?У меня были проблемы с вызовом перетаскиваемых / сортируемых событий в прошлом.Я открыт для альтернативных решений, просто должно быть очевидно, куда переместился элемент.

Редактировать: я изначально пытался спросить, как это сделать в списке jQuery sortable (), но яочевидно, это не очень хорошо сообщалось, поэтому я обновил вопрос, чтобы соответствовать всем замечательным ответам.

Ответы [ 4 ]

9 голосов
/ 08 августа 2011

Как и во втором примере avetarman, эта скрипка не ждет, пока вновь установленный флажок достигнет вершины, прежде чем другие займут свое законное место. Вместо этого все они оживляются вместе:

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

В конечном счете, все дело в том, чтобы дать строке, которую вы перемещаете, абсолютную позицию, чтобы она могла скользить вверх по другим строкам, в то же время присваивая необходимые атрибуты CSS этим другим строкам, чтобы они не сразу выпрыгивали из места. когда выбранная строка удаляется из потока документов с абсолютным позиционированием. Как только это будет сделано, выбранная строка теряет свое абсолютное положение, но добавляется в начало строк. Это позволяет «сбрасывать» все CSS, так что вы можете продолжить выбор новых строк.

3 голосов
/ 08 августа 2011

Проверьте эту скрипку.Плагин здесь не используется.

http://jsfiddle.net/bN8x6/

Проверьте также это обновление.Он использует относительное позиционирование.Итак, во время анимации заполнитель сохраняется.

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

2 голосов
/ 08 августа 2011

jQuery ui имеет перевод анимации.

Quick jsfiddle здесь.

Вы можете использовать это для имитации сортировки затем при обратном вызовепереместить фактический флажок.Когда я вернусь домой, я обновлю демо, чтобы использовать список флажков для выполнения сортировки.

0 голосов
/ 08 августа 2011

Попробуй это. 

$('#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>

Демо здесь: http://jsfiddle.net/naveen/gLBjt/

Отказ от ответственности: По сути это порт решения @redsquare. :)

...