html5实现ios长按图标后进入图标排序及删除功能的效果

"); </div> 我们知道在ios（国产定制安卓系统基本都有）设备上按下图标，图标就会不停的抖动，并且可以随心拖动排序和删除。
那么问题来了，我们怎么通过html5来实现呢？

1.首先要保证移动端支持tap,longtap,touch,drag等事件，因此引入了mui.js,当然根据项目需求，可以选择zepto.js等前端框架；
2.图标不停抖动的效果需要用到CSS3的animation,transfrom

1. /*循环线性抖动，一个周期0.5s*/ 
2. .shake { 
3.                 -webkit-transform-origin: center center; 
4.                 -webkit-animation-name: shake-rotate; 
5.                 -webkit-animation-duration: 0.5s; 
6.                 -webkit-animation-timing-function: linear; 
7.                 -webkit-animation-iteration-count: infinite; 
8.             } 
9. /*最大旋转2.5度，2.5deg正好，基本能达到ios图标抖动的效果www.bcty365.com*/ 
10. @-webkit-keyframes shake-rotate { 
11.                 0% { 
12.                     -webkit-transform: rotate(0deg); 
13.                 } 
14.                 12.5% { 
15.                     -webkit-transform: rotate(1.25deg); 
16.                 } 
17.                 25% { 
18.                     -webkit-transform: rotate(2.5deg); 
19.                 } 
20.                 37.5% { 
21.                     -webkit-transform: rotate(1.25deg); 
22.                 } 
23.                 50% { 
24.                     -webkit-transform: rotate(0deg); 
25.                 } 
26.                 62.5% { 
27.                     -webkit-transform: rotate(-1.25deg); 
28.                 } 
29.                 75% { 
30.                     -webkit-transform: rotate(-2.5deg); 
31.                 } 
32.                 87.5% { 
33.                     -webkit-transform: rotate(-1.25deg); 
34.                 } 
35.                 100% { 
36.                     -webkit-transform: rotate(0deg); 
37.                 } 
38.             } 

3.最关键的一点，排序和删除的功能，使用sortable.js来实现，不过最新的版本还是有些小瑕疵，因此我在源码的基础上做了一些修改
具体的瑕疵或bug如下：

1.在移动端如果滑动排序的速度很快，有闪烁效果
2.排序时没有延时,targetEl在dragEl刚drop时就开始移动了
3.targetEl和dragEl间的兄弟结点移动时没有动画，移动时很粗糙
4.dragEl在浮起拖动时，没有缩放效果

 

1. //新增了两个自定义属性，来改善排序效果 B5教程网
2. var sort = new Sortable(document.getElementById(""), { 
3.        &