html5實現ios長按圖標后進入圖標排序及刪除功能的效果##
我們知道在ios（國產定制安卓系統基本都有）設備上按下圖標，圖標就會不停的抖動，並且可以隨心拖動排序和刪除。
那么問題來了，我們怎么通過html5來實現呢？
1.首先要保證移動端支持tap,longtap,touch,drag等事件，因此引入了mui.js,當然根據項目需求，可以選擇zepto.js等前端框架；
2.圖標不停抖動的效果需要用到CSS3的animation,transfrom
/*循環線性抖動，一個周期0.5s*/
.shake {
-webkit-transform-origin: center center;
-webkit-animation-name: shake-rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
/*最大旋轉2.5度，2.5deg正好，基本能達到ios圖標抖動的效果*/
@-webkit-keyframes shake-rotate {
0% {
-webkit-transform: rotate(0deg);
}
12.5% {
-webkit-transform: rotate(1.25deg);
}
25% {
-webkit-transform: rotate(2.5deg);
}
37.5% {
-webkit-transform: rotate(1.25deg);
}
50% {
-webkit-transform: rotate(0deg);
}
62.5% {
-webkit-transform: rotate(-1.25deg);
}
75% {
-webkit-transform: rotate(-2.5deg);
}
87.5% {
-webkit-transform: rotate(-1.25deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
3.最關鍵的一點，排序和刪除的功能，使用sortable.js來實現，不過最新的版本還是有些小瑕疵，因此我在源碼的基礎上做了一些修改
具體的瑕疵或bug如下：
- 在移動端如果滑動排序的速度很快，有閃爍效果
- 排序時沒有延時,targetEl在dragEl剛drop時就開始移動了
- targetEl和dragEl間的兄弟結點移動時沒有動畫，移動時很粗糙
- dragEl在浮起拖動時，沒有縮放效果
//新增了兩個自定義屬性，來改善排序效果
var sort = new Sortable(document.getElementById(""), {
chosenClass: 'sort-chosen',
ghostClass: 'sort-ghost',
delay: 150,
animation: 400,
handle: '.drag-handle',
//-------- 自定義屬性
isDropAnimation: false, //DragDrop時是否對DragEl啟用滑動效果
ghostScale:1.2,//DragGhostEl 縮放效果
//--------
onStart: function( /**Event*/ evt) { // 拖拽
},
onEnd: function( /**Event*/ evt) { // 拖拽
var itemEl = evt.item;
var timespan = evt.timeStamp - touchtime;
if (timespan < 200) {} else if (itemEl.offsetLeft == item_offset.left && itemEl.offsetTop == item_offset.top) {} else {
//reset_order();
}
touchtime = null;
},
});
有圖有真相###
