Jquery实现移动端控制DIV拖拽

 更新时间:2022年02月23日 08:30:02   作者:不懂代码的程序员  
这篇文章主要为大家详细介绍了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;
        },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • jQuery ready函数滥用分析

    jQuery ready函数滥用分析

    jQuery的ready函数为我们编写打开页面时运行的脚本提供了方便,让我们不必再关注什么window.onLoad之类的事件,但是最近发现自己之前写的代码有点滥用这个函数了。
    2011-02-02
  • jQuery读取本地的json文件(实例讲解)

    jQuery读取本地的json文件(实例讲解)

    下面小编就为大家带来一篇jQuery读取本地的json文件(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • jQuery插件simplePagination的使用方法示例

    jQuery插件simplePagination的使用方法示例

    这篇文章主要介绍了jQuery插件simplePagination的使用方法,结合实例形式分析了jQuery插件simplePagination实现表单分页相关操作技巧与注意事项,需要的朋友可以参考下
    2020-04-04
  • Jquery瀑布流插件使用介绍

    Jquery瀑布流插件使用介绍

    瀑布流布局在目前貌似很火爆,具体的分析、原理、用到的知识等等可以看看以下几位牛人写的东西
    2012-10-10
  • jQuery使用正则验证15/18身份证的方法示例

    jQuery使用正则验证15/18身份证的方法示例

    这篇文章主要介绍了jQuery使用正则验证15/18身份证的方法,涉及jQuery基于正则进行数字字符串验证相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • 老生常谈combobox和combotree模糊查询

    老生常谈combobox和combotree模糊查询

    下面小编就为大家带来一篇老生常谈combobox和combotree模糊查询。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • jquery.ui.draggable中文文档

    jquery.ui.draggable中文文档

    暂时都使用xml格式, 方便传播, 制作电子书.
    2009-11-11
  • layui文件上传实现代码

    layui文件上传实现代码

    这篇文章主要为大家详细介绍了layui导航栏效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • jquery获取复选框的值的简单实例

    jquery获取复选框的值的简单实例

    下面小编就为大家带来一篇jquery获取复选框的值的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • fancybox modal的完美解决(右上的X)

    fancybox modal的完美解决(右上的X)

    有的时候我们希望保留右上的X,同时使用fancybox 的modal模式,怎么办呢
    2012-10-10

最新评论