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;
        },
})

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

赞 (0)

相关推荐

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

  • jQuery使用drag效果实现自由拖拽div

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mousedown事件,鼠标mousedown的时候记录此时的鼠标X轴和Y轴以及拖拽框的left和top,并且给拖拽标记赋值true,代表拖拽动作就绪.第二步是mousemove事件,此时动态获取鼠标的X轴和Y轴,然后计算出来拖拽框新的left和top并赋值使其实现拖拽效果.第三步是mouseup事件,鼠标弹

  • jquery实现拖拽调整Div大小

    今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. 复制代码 代码如下: (function ($) {     $.fn.dragDivResize = function () {         var deltaX, deltaY, _startX, _startY;         var resizeW, resizeH;         var size = 20;         var minSize = 10;         var scroll

  • jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

  • jQuery拖拽div实现思路

    思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是 1.组件左上角与屏幕左上角的相对位置 2.鼠标所在坐标与组件左上角的相对位置. 具体函数如下: 复制代码 代码如下: .drag{ position:absolute; background:#0000CC; top:100px;left:200px; padding:0; } 复制代码 代码如下: $(document).ready(function(){ var move=fal

  • jQuery div拖拽用法实例

    本文实例讲述了jQuery div拖拽用法.分享给大家供大家参考,具体如下: 这里需要引用好jquery 和 jqueryui两个包: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta n

  • jQuery控制Div拖拽效果完整实例分析

    本文实例讲述了jQuery控制Div拖拽效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • jQuery实现div拖拽效果实例分析

    本文实例分析了jQuery实现div拖拽效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type=&q

  • jquery实现div拖拽宽度示例代码

    本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码.欢迎拍砖 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html style="height:100%;"> <head> <meta http-e

  • jQuery拖拽通过八个点改变div大小

    jQuery拖拽通过八个点改变div大小 js: (function($) { /** * 默认参数 */ var defaultOpts = { stage: document, //舞台 item: 'resize-item', //可缩放的类名 }; /** * 定义类 */ var ZResize = function(options) { this.options = $.extend({}, defaultOpts, options); this.init(); } ZResize.

随机推荐