網站首頁 編程語言 正文
本文實例為大家分享了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; ? ? ? ? }, })
原文鏈接:https://blog.csdn.net/weblys/article/details/111324071
相關推薦
- 2022-11-14 基于統計自適應線性回歸-目標尺寸預測
- 2022-08-29 C語言八道筆試題精講帶你掌握指針_C 語言
- 2023-10-14 c/c++--字節對齊(byte alignment)
- 2022-03-04 element-ui 固定彈窗底部的按鈕
- 2022-05-27 hive中的幾種join到底有什么區別_數據庫其它
- 2022-04-01 SQL?Server?索引和視圖詳解_MsSql
- 2022-06-01 python中的mock接口開發示例詳解_python
- 2022-06-22 使用docker?compose一鍵部署WordPress博客的方法_docker
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支