欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

Jquery实现移动端控制DIV拖拽

时间:2022-12-28 09:38:34|栏目:jquery|点击:

本文实例为大家分享了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;
        },
})

上一篇:jQuery实现table表格checkbox全选的方法分析

栏    目:jquery

下一篇:jquery ajax传递中文参数乱码问题及解决方法说明

本文标题:Jquery实现移动端控制DIV拖拽

本文地址:http://www.codeinn.net/misctech/222360.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有