一个超小的jQuery插件,它使用CSS3转换和转换将平滑的排序动画添加到基于jQuery UI sortable()的拖放列表中。
当旧浏览器不支持CSS3动画时,可以回退到jQuery的animate。
1.在安装了jquery和jquery ui的html页面中包含jquery.ui.sortable-animation.js脚本。
- <link rel="stylesheet" href="jquery-ui.min.css">
- ...
- <script src="jquery.min.js"></script>
- <script src="jquery-ui.min.js"></script>
- <script src="jquery.ui.sortable-animation.js"></script>
2.按照这里介绍的标记结构创建一个可排序的html列表。
- <ul id="sortable" class="sortable-container">
- <li class="sortable-item">Item 1</li>
- <li class="sortable-item">Item 2</li>
- <li class="sortable-item">Item 3</li>
- <li class="sortable-item">Item 4</li>
- <li class="sortable-item">Item 5</li>
- <li class="sortable-item">Item 6</li>
- <li class="sortable-item">Item 7</li>
- </ul>
3.调用函数在html列表上启用jQuery UI可排序,并配置排序动画。
- $('#sortable').sortable({
- animation: 150 // default: 0
- });
2022-01-21
2019-05-07
2015-12-24
2015-10-15