Jquery实现移动端控制DIV拖拽
作者:不懂代码的程序员
这篇文章主要为大家详细介绍了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; }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。