本文实例为大家分享了Jquery实现移动端控制DIV拖拽的具体代码,供大家参考,具体内容如下 需求:车型配置表,移动端需要滑动,并且多项配置的表需要联动对应头部分类名称 要求:左侧
本文实例为大家分享了Jquery实现移动端控制DIV拖拽的具体代码,供大家参考,具体内容如下
需求:车型配置表,移动端需要滑动,并且多项配置的表需要联动对应头部分类名称
要求:左侧 title 固定 / 顶部需要吸顶效果
处理方案:一开始打算使用table表格,但是发现不太好控制,后来就使用了div进行模拟了table表格。左侧title 和 右侧的表格属于两部分结构。
然后移动端的时候进行相对定位,控制右侧的盒子进行联动并且实现滑动效果
const ContBox = $('.div');
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;
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 = moveX;
},
})
--结束END--
本文标题: Jquery实现移动端控制DIV拖拽
本文链接: https://www.lsjlt.com/news/140117.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0