Jquery實現(xiàn)移動端控制DIV拖拽

更新時間：2022年02月23日 08:30:02 作者：不懂代碼的程序員

這篇文章主要為大家詳細介紹了Jquery實現(xiàn)移動端控制DIV拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Jquery實現(xiàn)移動端控制DIV拖拽的具體代碼，供大家參考，具體內(nèi)容如下

需求：車型配置表，移動端需要滑動，并且多項配置的表需要聯(lián)動對應(yīng)頭部分類名稱

要求：左側(cè) title 固定 / 頂部需要吸頂效果

處理方案：一開始打算使用table表格，但是發(fā)現(xiàn)不太好控制，后來就使用了div進行模擬了table表格。左側(cè)title 和右側(cè)的表格屬于兩部分結(jié)構(gòu)。

然后移動端的時候進行相對定位，控制右側(cè)的盒子進行聯(lián)動并且實現(xiàn)滑動效果

/*
? ? 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});
? ? ? ? ? ? /* 鼠標按下后 一直處于拖動狀態(tài)的時候 把 新的 鼠標位置 賦值給 startX ?*/
? ? ? ? ? ? /* 然后再次執(zhí)行回來 依舊等于 滑動的新位置 減去 startX ?而不是 拖拽的時候 startX 一直處于 默認的初始位置 */
? ? ? ? ? ? startX = moveX;
? ? ? ? },
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: