關於H5實現微信長按圖片拖動調整順序

當你明白功能的實現邏輯的時候，往往實現的過程中會給你帶來驚喜，所以先去明確功能的實現邏輯，剩下的事情會水到渠成
比如這個功能，開始的時候我是這樣想的，第一張圖片的左側中點作為左側觸發邊界點，右側中點作為右側觸發邊界點，當第一張圖片的右側邊界點拖動到第二張圖片的右半部分時，將第二張圖片移動到左邊，並交換兩張圖片的index和位置。當第二張圖片的左側邊界點拖動到第一張圖片的左半部分時，將第一張圖片移動到右邊，並較遠兩張圖片的index和位置。但是實現后發現只能拖動一次，就是左邊的拖到右邊，右邊的拖動到左邊，出現第三張圖片的時候就不行了，還有個問題就是拖動第一張圖片到右邊第二張圖片移動到左邊后，這時候拖動還沒完成，再把第一張圖片托回去后，移動到左邊的第二張圖片並不會回去。然后又想了想分別針對每張圖片設置觸發區間，當一張圖片拖動時觸發這些區間后移動，做着做着感覺做不動了。
然后又看了看微信的操作，發現是以每張圖片的中心點做參考的，當你拖動一張圖片的時候，其他圖片的中心點就作為觸發點，當其他圖片的中心點處在拖動的圖片內的時候把觸發的圖片和當前拖動的圖片的index和位置互換。這樣不考慮index順序，當前拖動圖片被動觸發才是正確的思路

效果如下

代碼如下，插入的圖片元素需要有class和moveindex，插入后執行press函數，代碼需要修改對應的圖片class，moveindex屬性對應上才能正常運行，主要還是看實現邏輯，有問題請提出，有不足和改進的建議也請提出

$.fn.press = function () {
    var timeOutEvent = 0,startX,startY,offsetX,offsetY,moveX,moveY,imgOffsetTop,imgOffsetLeft,scrollTop,imgHeight,imgWidth,modalHeight,windowHeight,imgIndex,imgArr = [],imgStartOffsetLeft,imgStartOffsetTop,isLongPress;
    var img = $(this);
    var imgWidthHeight = img[0].clientWidth;
    $.each($('.imgClass'),function (i,e) {
        $(this).css({
            'position' : 'absolute',
            'left'     : e.offsetLeft,
            'top'      : e.offsetTop
        })
    })
    $(img).on({
        touchstart: function(e){
            timeOutEvent = setTimeout(function(){
                timeOutEvent = 0;
                $(img).css({'width':'3rem','height':'3rem'});
                imgStartOffsetLeft = $(img)[0].offsetLeft;
                imgStartOffsetTop = $(img)[0].offsetTop;
                startX  = e.originalEvent.targetTouches[0].pageX;
                startY  = e.originalEvent.targetTouches[0].pageY;
                offsetX = startX - imgStartOffsetLeft;
                offsetY = startY - imgStartOffsetTop;
                imgIndex = parseInt($(img).attr('moveindex'));
                $(img).css({
                    'position':'absolute',
                    'z-index':'200',
                    'left':imgStartOffsetLeft + 'px',
                    'top':imgStartOffsetTop + 'px'
                });
                //防止微信露底
                document.body.ontouchmove = function (e) {
                    e.preventDefault();
                };
                //阻止長按默認行為，比如微信長按圖片彈出菜單
                $(img).bind('contextmenu', function(e) {
                    e.preventDefault();
                })
                //獲取當前所有圖片的占位位置，為長按拖動后的移動做准備
                $.each($('.imgClass'),function (i,e) {
                    var index = $(e).attr('moveindex');
                    imgArr[index] = {
                        x1 : e.offsetLeft,
                        x2 : imgWidthHeight,
                        y1 : e.offsetTop,
                        y2 : imgWidthHeight,
                        trigger : {
                            x : e.offsetLeft + imgWidthHeight / 2,
                            y : e.offsetTop + imgWidthHeight / 2
                        }
                    };
                })
                isLongPress = true;
            },200);

        },
        touchmove: function(e){
            clearTimeout(timeOutEvent);
            timeOutEvent = 0;
            if(isLongPress) {
                moveX = e.originalEvent.targetTouches[0].pageX;
                moveY = e.originalEvent.targetTouches[0].pageY;
                $(img).css({
                    'left': moveX - offsetX + 'px',
                    'top': moveY - offsetY + 'px'
                })
                imgOffsetTop = $(img)[0].offsetTop;
                imgOffsetLeft = $(img)[0].offsetLeft;
                scrollTop = document.body.scrollTop;
                imgHeight = $(img)[0].offsetHeight;
                imgWidth = $(img)[0].offsetWidth;
                windowHeight = window.innerHeight;


                //判斷當前圖片是否移動到其它圖片上面
                if (imgArr.length > 1) {
                    for(var i = 0;i < imgArr.length;i++){
                        var trigger = imgArr[i].trigger;
                        if( i != imgIndex && trigger.x >= imgOffsetLeft && trigger.x <= (imgOffsetLeft + imgWidth) && trigger.y >= imgOffsetTop && trigger.y <= (imgOffsetTop + imgHeight)){
                            $('.imgClass[moveindex=' + i + ']').css('position', 'absolute').attr('moveindex',imgIndex).animate({
                                'left': imgArr[imgIndex].x1 + 'px',
                                'top': imgArr[imgIndex].y1 + 'px'
                            }, 300);
                            $(img).attr('moveindex', i);
                            imgIndex = i;
                        }
                    }
                }
            }

        },
        touchend: function () {
            clearTimeout(timeOutEvent);
            if(isLongPress){
                var imgLeft = imgArr[ imgIndex ].x1 + 'px';
                var imgTop = imgArr[ imgIndex ].y1 + 'px';
                $(img).css({
                    'position': 'absolute',
                    'width': '2.8rem',
                    'height': '2.8rem',
                    'left':  imgLeft,
                    'top': imgTop,
                    'z-index': 0
                });
            }
            isLongPress = false;
            document.body.ontouchmove = function (e) {
                e.stopPropagation();
            };
            if(timeOutEvent != 0){
                console.log('單擊了')
            }
        }
    })
}