Làm thế nào để bắt chước một sự kiện sắp xếp với hoạt ảnh bằng jQuery?

Question

Tôi có một danh sách các mục, mỗi mục chứa một hộp kiểm. Khi một hộp kiểm được chọn, tôi muốn mục đó sắp xếp chính nó vào đầu danh sách, tốt nhất là làm động như thể nó đang được kéo bằng chuột (nhưng không có con trỏ chuột).

Điều này có khả thi không? Tôi đã gặp sự cố khi kích hoạt các sự kiện có thể kéo/sắp xếp được trong quá khứ. Tôi đang mở cho các giải pháp thay thế, nó chỉ cần được rõ ràng, nơi mục đã chuyển đến.

Chỉnh sửa: Ban đầu tôi đang cố hỏi làm thế nào để điều này xảy ra trên danh sách jQuery có thể sắp xếp, nhưng rõ ràng là tôi không giao tiếp tốt, vì vậy tôi đã cập nhật câu hỏi để phù hợp với tất cả các câu trả lời tuyệt vời.

Answer 1

Tương tự như ví dụ thứ hai avetarman của, fiddle này không chờ đợi cho hộp mới kiểm tra để đạt đến đỉnh trước khi những người khác mất vị trí xứng đáng của họ. Thay vào đó, tất cả họ đều được hoạt hình với nhau:

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

Cuối cùng, đó là tất cả về cho hàng bạn đang di chuyển một vị trí tuyệt đối để nó có thể trượt lên trên các hàng khác, trong khi cho CSS cần thiết thuộc tính những hàng khác để chúng không ngay lập tức nhảy ra khỏi vị trí khi hàng đã chọn được loại bỏ khỏi luồng tài liệu với vị trí tuyệt đối. Khi đã xong, hàng đã chọn mất vị trí tuyệt đối của nó, nhưng được nối vào phần đầu của các hàng. Điều này cho phép tất cả các css về cơ bản là "thiết lập lại", để bạn có thể tiến hành lựa chọn các hàng mới.

Answer 2

jQuery ui có hoạt ảnh transfer.

Nhanh jsfiddle tại đây.

Bạn có thể sử dụng quyền này để truyền đạt sắp xếp sau đó khi gọi lại, hãy di chuyển hộp kiểm thực. Tôi sẽ cập nhật bản trình diễn khi tôi về nhà để sử dụng danh sách các hộp kiểm để thực hiện sắp xếp.

Answer 3

Kiểm tra câu đố này. Không có plugin nào được sử dụng tại đây.

http://jsfiddle.net/bN8x6/

Kiểm tra bản cập nhật này. Nó sử dụng vị trí tương đối. Vì vậy, trong khi hoạt ảnh, trình giữ chỗ đang được lưu giữ.

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

Answer 4

Hãy thử điều này.

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

Disclaimer: Đây thực chất là một cổng của giải pháp @redsquare. :)