CODEWITHSUNDEEP
jqueryanimationjquery-ui-sortable
peterjwest
peterjwest

Reputation: 4452

How to imitate a sort event with animation using jQuery?

I've got a list of items, each containing a checkbox. When a checkbox is ticked I'd like that item to sort itself to the beginning of the list, preferably animating as if it were being dragged with the mouse (but without a mouse cursor).

Is this possible? I've had trouble triggering draggable/sortable events in the past. I'm open to alternate solutions, it just need to be obvious where the item has moved to.

Edit: I was originally trying to ask how to make this happen on a jQuery sortable() list, but I obviously didn't communicate that very well, so I've updated the question to match all the wonderful answers.

Upvotes: 6

Views: 4399

Answers (4)

codeandcloud
codeandcloud

Reputation: 55248

Try this. 

$('#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 here: http://jsfiddle.net/naveen/gLBjt/

Disclaimer: This is essentially a port of @redsquare solution. :)

Upvotes: -1

maxedison
maxedison

Reputation: 17573

Similar to avetarman's second example, this fiddle doesn't wait for the newly checked box to reach the top before the other ones take their rightful place. Instead, they all get animated together:

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

Ultimately, it's all about giving the row you're moving an absolute position so that it can slide up over the other rows, while giving the necessary CSS attributes to those other rows so that they don't immediately jump out of place when the selected row is removed from the document flow with the absolute positioning. Once that is done, the selected row loses it's absolute positioning, but is appended to the beginning of the rows. This allows all the css to essentially be "reset", so that you can proceed selecting new rows.

Upvotes: 8

avetarman
avetarman

Reputation: 1252

Check this fiddle. No plugin is used here.

http://jsfiddle.net/bN8x6/

Check this update as well. It uses relative positioning. So, during animation the placeholder is being kept.

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

Upvotes: 3

redsquare
redsquare

Reputation: 78677

jQuery ui has a transfer animation.

Quick jsfiddle here.

You could use this to immitate the sort then on the callback move the actual checkbox. I will update the demo when I get home to use a list of checkboxes to do the sort.

Upvotes: 2

Related Questions