jQuery实现移动端悬浮拖动效果

模拟手机端悬浮按钮功能，自动吸附两边，并且不能超过活动区域，上下超过自动吸附上或下

因为是移动端端事件，需要调试到移动端才可以看效果

以下是代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <title>Document</title>
    <style>
        .service_s {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            display: none;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .content {
            position: fixed;
            top: 10%;
            right: 3%;
            left: 3%;
            bottom: 10%;
            border: 1px solid #cccc77;
            background: #cccc77;
            display: flex;
            align-items: center;
            color: #fff;
            font-weight: 600;
            justify-content: center;
        }
        .service {
            position: fixed;
            top: 60%;
            right: 3%;
            height: 40px;
            width: 40px;
            background: #0baefd;
            z-index:9
        }

    </style>
</head>
<body>
    <div class="content">活动区域</div>
    <div class="service">
    <!--    <div class="service_s"></div>-->  <!--        遮罩层-->
</div>
<script>
    /**
     *  nx  ng 移动坐标
     *   wxX wxY  初始坐标
     *      isDown 阻止事件重复触发
     * **/
    var nx, ny, wxX, wxY, isDown = false;  //X Y坐标
    // H5页面
    $('.service').bind("touchstart", function (e) {
    //点击触发
        e.preventDefault();
        $(this).css("transform", 'translate(0)')
        var touch = event.targetTouches[0];
        wxX = touch.clientX;
        wxY = touch.clientY;
        // $('.service_s').show()  //是否需要一个遮罩层
        isDown = true;
        $(document).bind("touchmove", function (ev) {
        //滑动触发
            e.preventDefault();
            if (!isDown) return
            var touch = event.targetTouches[0];
            ny = touch.clientY - $('.service').height() / 2
            nx = touch.clientX - $('.service').width() / 2
            $('.service').css('top', '' + ny / ($(window).height() / 100) + '%')
            $('.service').css('left', '' + nx / ($(window).width() / 100) + '%')
        })
    }).bind("touchend", function (e) {
        //移开触发
        var touch = event.changedTouches[0];
        //判断跟初始坐标是否一致，一致则大概率为点击事件
        if (wxX === touch.clientX && wxY === touch.clientY) {
            alert('点击了')
        } else {
        //判断所在位置,自动吸附左右，如果超过上下活动区域范围则在左右的基础上加上吸附上下
            if (nx < $(window).width() / 2) {
                if ($(window).height() * 0.9 - $('.service').height() < ny) {
                    $('.service').css({"top": "90%", "transform": `translateY(${-($(this).height())}px)`})
                } else if ($(window).height() * 0.1 > ny) {
                    $('.service').css({"top": "10%"})
                }
                $('.service').css({"left": "3%",})
            } else {
                if ($(window).height() * 0.9 - $('.service').height() < ny) {
                    $('.service').css({
                        "top": "90%",
                        "left": "97%",
                        "transform": `translate(${-($(this).height())}px,${-($(this).width())}px)`
                    })
                } else if ($(window).height() * 0.1 > ny) {
                    $('.service').css({"top": "10%", "left": "97%", "transform": `translateX(${-($(this).width())}px)`})
                } else {
                    $('.service').css({"left": "97%", "transform": `translateX(${-($(this).width())}px)`})
                }
            }
        }
        isDown = false;
         //$('.service_s').hide()
    })
</script>
</body>

</html>

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

赞 (0)

相关推荐

  • jQuery仿360导航页图标拖动排序效果代码分享

    jQuery仿360导航页图标拖动排序效果代码分享

    jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码.本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下. 运行效果图:                                         ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的360导航页图标拖动排序效果代码如下 <!DOCTYPE

  • jquery+css实现移动端元素拖动排序

    jquery+css实现移动端元素拖动排序

    本文实例为大家分享了jquery+css实现移动端元素拖动排序的具体代码,供大家参考,具体内容如下 1.近期需要实现一个选项进行拖动排序的页面,页面如下: 2.JSP页面代码: ​<body>     <div class="main">         <div id="drag-div" class="drag-div">             <div class="others&quo

  • jquery实现表格行拖动排序

    jquery实现表格行拖动排序

    本文实例为大家分享了jquery实现表格行拖动排序的具体代码,供大家参考,具体内容如下 引入JS <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> html代码 <!doctype html> <html> <head>     <meta charset="U

  • 基于JQuery的列表拖动排序实现代码

    要求 拖动排序,从名字就不难想像,就是按住一行数据拖到想要的排序位置,保存新的排序队列. 思路 首先给列表行建立锚点,绑定mousedown和mouseup事件,当鼠标移动到想要插入的位置时,将对象行移动到目标行,然后对其经过的所有行进行排序处理. 思路很简单,但这里面仍然有几个问题要注意 1.移动到什么位置可以视作要插入到目标行的位置.2.移动出了顶端和底端时,判断为第一和最后.3.向上移动和向下移动的处理 解决 关于事件 Javascript里鼠标按下和放开事件为onmousedown,on

  • jquery实现的鼠标拖动排序Li或Table

    1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • jQuery-ui插件sortable实现自由拖动排序

    jQuery-ui插件sortable实现自由拖动排序

    本文为大家分享了jQuery ui插件sortable实现自由拖动排序的具体方法,供大家参考,具体内容如下 此为网上资源demo自己做了修改,记录下方便日后的学习. 效果展示: 代码展示: <!doctype html> <html lang="en"> <!-- 学习功能:使用Jquery-ui的sortable插件实现拖动排序 author: lisa于2018-5-30 --> <head> <meta charset=&qu

  • jquery对元素拖动排序示例

    完整代码:(aspx文件末尾有下载) 复制代码 代码如下: <!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"> <head> <

  • jQuery拖动元素并对元素进行重新排序

    jQuery拖动元素并对元素进行重新排序

    本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下 效果图: 具体内容如下: 从上图可以看出我们今天要实现的功能.当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序.比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了.这样便很好的提高了用户体验. 下边,我们一步一步来实现这个功能. <span id="show"> <div> <input id="check

  • 针对后台列表table拖拽比较实用的jquery拖动排序

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码,很简单: 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title>

  • jQuery实现的简单对话框拖动功能示例

    jQuery实现的简单对话框拖动功能示例

    本文实例讲述了jQuery实现的简单对话框拖动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.jb51.net jquery 拖动&

随机推荐