html5實現ios長按圖標後進入圖標排序及刪除功能的效果

時間 2019-12-10

標籤 html5 html 實現 ios 圖標進入排序刪除功能效果欄目 HTML5 简体版

原文原文鏈接

html5實現ios長按圖標後進入圖標排序及刪除功能的效果

咱們知道在ios（國產定製安卓系統基本都有）設備上按下圖標，圖標就會不停的抖動，而且能夠隨心拖動排序和刪除。
那麼問題來了，咱們怎麼經過html5來實現呢？

1.首先要保證移動端支持tap,longtap,touch,drag等事件，所以引入了mui.js,固然根據項目需求，能夠選擇zepto.js等前端框架；
2.圖標不停抖動的效果須要用到CSS3的animation,transfromhtml

/*循環線性抖動，一個週期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;
                },
            });