广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Jquery实现移动端控制DIV拖拽
  • 300
分享到

Jquery实现移动端控制DIV拖拽

2024-04-02 19:04:59 300人浏览 薄情痞子
摘要

本文实例为大家分享了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文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Jquery实现移动端控制DIV拖拽
    本文实例为大家分享了Jquery实现移动端控制DIV拖拽的具体代码,供大家参考,具体内容如下 需求:车型配置表,移动端需要滑动,并且多项配置的表需要联动对应头部分类名称 要求:左侧 ...
    99+
    2022-11-13
  • jquery实现移动端悬浮拖拽框
    使用jquery 实现了一个基础的悬浮弹拖拽窗, 根据自己的需求去完善动效。 分享给大家供大家参考,具体如下: 演示效果 代码块 需要引入jquery , 引入本地或线上根据自己的...
    99+
    2022-11-13
  • vue实现移动端div拖动效果
    本文实例为大家分享了vue实现移动端div拖动的具体代码,供大家参考,具体内容如下 手机上会偶尔用到拖动div的效果,虽然我自己还没遇到,先写一个以防万一,需要注明的是,具体实现代码...
    99+
    2022-11-13
  • vue实现移动端touch拖拽排序
    目录功能介绍:大致需求:整体思路:简单效果展示:具体实现:一、display:flex+v-for布局:二、touch事件绑定:三、卡片移动:四、获取手指所在位置:五、操作数组(删除...
    99+
    2022-09-27
  • vue实现移动端拖拽悬浮按钮
    目录功能介绍:大致需求:整体思路:具体实现:一、position:fixed布局:二、touch事件绑定:三、页面引入:本文实例为大家分享了vue实现移动端拖拽悬浮按钮的具体代码,供...
    99+
    2022-09-27
  • vue怎么实现移动端div拖动效果
    本文小编为大家详细介绍“vue怎么实现移动端div拖动效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现移动端div拖动效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1、分享代码html代码&...
    99+
    2023-06-29
  • vue实现移动端可拖拽式icon图标
    本文实例为大家分享了vue实现移动端可拖拽式icon图标的具体代码,供大家参考,具体内容如下 需求描述:在移动端页面悬浮一个可随便拖拽的图标,类似于苹果手机的辅助触控小圆点,并且可随...
    99+
    2022-11-13
  • jQuery实现移动端悬浮拖动效果
    模拟手机端悬浮按钮功能,自动吸附两边,并且不能超过活动区域,上下超过自动吸附上或下 因为是移动端端事件,需要调试到移动端才可以看效果 以下是代码 <!DOCTYPE ht...
    99+
    2022-11-13
  • vue如何实现移动端拖拽悬浮按钮
    这篇文章主要讲解了“vue如何实现移动端拖拽悬浮按钮”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue如何实现移动端拖拽悬浮按钮”吧!功能介绍:在移动端开发中,实现悬浮按钮在侧边显示,为不...
    99+
    2023-07-02
  • typescript+react实现移动端和PC端简单拖拽效果
    本文实例为大家分享了typescript+react实现移动端和PC端简单拖拽效果的具体代码,供大家参考,具体内容如下 一、移动端 1.tsx代码 import { Compon...
    99+
    2022-11-12
  • jquery+css实现移动端元素拖动排序
    本文实例为大家分享了jquery+css实现移动端元素拖动排序的具体代码,供大家参考,具体内容如下 1.近期需要实现一个选项进行拖动排序的页面,页面如下: 2.JSP页面代码:...
    99+
    2022-11-13
  • iOS使用UICollectionView实现拖拽移动单元格
    目录一.介绍二.方法和步骤三.iOS9之后添加的API本文实例为大家分享了iOS开发UICollectionView拖拽移动单元格的具体代码,供大家参考,具体内容如下 一.介绍 iO...
    99+
    2022-11-13
  • HTML5中canvas如何实现移动端上传头像拖拽裁剪效果
    这篇文章将为大家详细讲解有关HTML5中canvas如何实现移动端上传头像拖拽裁剪效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 html部分: <!DOC...
    99+
    2022-10-19
  • jQuery实现鼠标拖动div改变位置、大小的实践
           实现类似windows窗体的效果,在中间拖动改变div位置,在边缘拖动改变div大小,鼠标在相应的...
    99+
    2022-11-12
  • jQuery如何实现div跟随鼠标移动
    小编给大家分享一下jQuery如何实现div跟随鼠标移动,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置:用jQuery...
    99+
    2022-10-19
  • HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法
    这篇文章主要介绍HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽...
    99+
    2023-06-09
  • iOS怎么使用UICollectionView实现拖拽移动单元格
    这篇“iOS怎么使用UICollectionView实现拖拽移动单元格”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“iOS怎...
    99+
    2023-06-30
  • jQuery实现鼠标拖动div改变位置、大小的操作
    本篇内容主要讲解“jQuery实现鼠标拖动div改变位置、大小的操作”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery实现鼠标拖动div改变位置、大小的操作”吧!  ...
    99+
    2023-06-14
  • jquery实现移动端按钮组左右滑动
    本文实例为大家分享了jquery实现移动端按钮组左右滑动的具体代码,供大家参考,具体内容如下 学习移动端触摸相关功能时写了一个例子,共享一下,其中最不好理解的是screen、page...
    99+
    2022-11-13
  • Qt实现拖动单个控件移动的示例代码
    目录1.设置窗口拖拽属性2.创建初始控件3.选中控件进行拖动3.1响应mousePressEvent事件3.2判断控件拖动3.3事件处理3.4结束拖动做惯了静态图,今天来搞一搞动态图...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作