Jquery實現移動端控制DIV拖拽

本文實例為大傢分享瞭Jquery實現移動端控制DIV拖拽的具體代碼,供大傢參考,具體內容如下

需求:車型配置表,移動端需要滑動,並且多項配置的表需要聯動對應頭部分類名稱

要求:左側 title 固定 / 頂部需要吸頂效果

處理方案:一開始打算使用table表格,但是發現不太好控制,後來就使用瞭div進行模擬瞭table表格。左側title 和 右側的表格屬於兩部分結構。

然後移動端的時候進行相對定位,控制右側的盒子進行聯動並且實現滑動效果

/*
    touchstart 事件
    touchmove  事件
*/
 
const ContBox = $('.div');
/* 用ContBox的總寬度減去當前可視化的窗口寬度 等於 可移動的left最大值 */
const maxX = ContBox.width() - $('.demo').width();
ContBox.on({
        touchstart:function(e){
            var e = e || window.event;
            /* 獲取鼠標點擊的位置 */
            startX = e.originalEvent.targetTouches[0].pageX;
            /* 獲取當前元素的偏移 */
            sX=$(this).offset().left; /* 沒有用到 */
        },
        touchmove:function(e){
            var e = e || window.event;
            e.preventDefault();
            /* 移動的同時不斷的獲取新的鼠標位置 */
            moveX=e.originalEvent.targetTouches[0].pageX;
            /* 新的位置 減去 最開始的位置 等於 要移動的值 */
            var frameX = moveX - startX;
            /* 獲取原有的 left 偏移量 + 要移動的值 等於 最終移動的值 */
            var moveLeft = parseInt(ContBox.css("left")) + frameX;
            if(moveLeft<=-maxX){
                moveLeft = -maxX
            }
            if(moveLeft >= 0){
                moveLeft = 0
            }
            ContBox.css({left:moveLeft});
            TitleBox.css({left:moveLeft});
            /* 鼠標按下後 一直處於拖動狀態的時候 把 新的 鼠標位置 賦值給 startX  */
            /* 然後再次執行回來 依舊等於 滑動的新位置 減去 startX  而不是 拖拽的時候 startX 一直處於 默認的初始位置 */
            startX = moveX;
        },
})

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: