Hoạt hình jQueryUI Sắp xếp bằng cách sử dụng chuyển tiếp CSS3

Question

Làm cách nào để sử dụng chuyển đổi CSS3 (hoặc bất kỳ phương tiện nào khác) để thực hiện hành động jQuery Sortable giống như sắp xếp lại danh sách trong iOS, trong đó các mục danh sách hoạt động trơn tru trong khi kéo theo cách bạn kéo?

[chỉnh sửa để tắt chức năng này thành một câu hỏi thường gặp và tiết kiệm thời gian cho bất kỳ ai khác muốn con số này ra]

Answer 1

https://gist.github.com/801570 cho thấy làm thế nào để trơn tru động kéo sử dụng jQuery Sortable. Vật phẩm chạy ra khỏi đường khi bạn kéo. Nó sử dụng CSS3 Transitions và hiệu quả là chính xác những gì tôi đang tìm kiếm. Rất tuyệt.

Dưới đây là các mã:

JSFIDDLE:

http://jsfiddle.net/LTWMp/

HTML:

<style name="impostor_size"> 
    .marker + li { border-top-width:0px; } 
</style> 
<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
</ul> 

CSS:

body { color:white; font-family:Helvetica, sans-serif; padding: 10px} 
ul { float:left; width:300px; overflow:hidden; border-radius:6px; } 
li { display:block; position:relative; padding:12px 6px; z-index:1; margin:5px 20px; } 
li:after { background:#18629D; display:block; position:absolute; height:100%; width:100%; top:0px; left:0px; content:' '; border-radius:6px; z-index:-1; } 
li { -moz-transition:border-top-width 0.1s ease-in; -webkit-transition:border-top-width 0.1s ease-in; border-top:0px solid rgba(0,0,0,0); } 
.marker { opacity:0.0; } 

Script:

var stylesheet = $('style[name=impostor_size]')[0].sheet; 
var rule = stylesheet.rules ? stylesheet.rules[0].style : stylesheet.cssRules[0].style; 
var setPadding = function(atHeight) { 
    rule.cssText = 'border-top-width: '+atHeight+'px'; 
}; 
$('ul').sortable({ 
    'placeholder':'marker', 
    'start':function(ev, ui) { 
     setPadding(ui.item.height()); 
    }, 
    'stop':function(ev, ui) { 
     var next = ui.item.next(); 
     next.css({'-moz-transition':'none', '-webkit-transition':'none', 'transition':'none'}); 
     setTimeout(next.css.bind(next, {'-moz-transition':'border-top-width 0.1s ease-in', '-webkit-transition':'border-top-width 0.1s ease-in', 'transition':'border-top-width 0.1s ease-in'})); 
    } 
}); 

Answer 2

tôi đã được cải thiện trên tất cả những điều trên bằng cách tận dụng chức năng 'thay đổi' trong api sắp xếp. Đây là mã. Kiểm tra các fiddle dưới đây để xem css yêu cầu.

$('ul').sortable({ 
placeholder:'marker', 
distance: 15, 
cursor: 'move', 
revert: 200, 
start:function(ev, ui) { 
    $(".marker").css({"height": "0px"}); 
    console.log("start"); 
}, 
change:function(ev, ui) { 
    $(".marker").css({"height": "0px"}); 
    setTimeout(function(){ 
     $(".marker").css({"height": "40px"}); 
    },10); 
} }); 

Bạn có thể xem mã ví dụ đầy đủ here

http://jsfiddle.net/LTWMp/284/