Geek Answers Handbook

How to simulate a sort event with animation using jQuery?

I have a list of items, each of which contains a checkbox. When the checkmark is checked, I would like this element to sort itself to the beginning of the list, preferably animating as if it were dragged by the mouse (but without the mouse cursor).

Is it possible? I had problems triggering drag / sort events in the past. I am open to alternative solutions, it just needs to be obvious where the element is moved.

Edit: I initially tried to ask how this happened on the jQuery () sort list, but I obviously didn’t talk very well about this, so I updated the question to fit all the wonderful answers.

+5
source share
4 answers

Like the second example of avetarman, this violin did not wait for the newly installed box to reach the top before the others took their rightful place. Instead, they all come to life together:

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

Ultimately, it's all about ensuring that the line you are moving is absolute, so that it can slide along other lines, providing the necessary CSS attributes to these other lines so that they don't immediately jump out of place when the selected line is removed from the document stream from absolute positioning. Once this is done, the selected line loses its absolute positioning, but is added to the beginning of the lines. This allows all css to essentially be "reset", so you can continue to select new lines.

+6

jQuery ui transfer.

jsfiddle .

, , . , , .

+2

.

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

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

: , , @redsquare.:)

-1

More articles:


All Articles