我如何使用
CSS3过渡(或任何其他方法)使
jQuery Sortable行为更像iOS中的列表重新排序,其中列表项在拖动时平滑动画,因此当您拖动时项目会匆匆忙忙?
[编辑将其变成常见问题解答,为其他想要解决这个问题的人节省时间]
解决方法
https://gist.github.com/801570显示了如何使用
jQuery Sortable平滑地设置拖动动画.当您拖动时,项目会匆匆忙忙.它使用
CSS3 Transitions,效果正是我想要的.很酷.
这是代码:
的jsfiddle:
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); } .marker { opacity:0.0; }
脚本:
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'})); } });