jq创建可拖拽可点击的弹出层效果附效果图

Excel效率人

已于 2022-09-04 17:17:26 修改

阅读量481

点赞数 1

分类专栏： javascript文章文章标签： html 前端 css jquery

于 2022-09-04 17:16:19 首次发布

本文链接：https://blog.csdn.net/huaermeier/article/details/126691176

版权

jQuery 拖拽元素交互鼠标点击事件处理

关键词由CSDN通过智能技术生成

javascript文章专栏收录该内容

2 篇文章 1 订阅

订阅专栏

要求：

按住鼠标可以拖动元素1；
点击元素1可以弹出另一个元素2，再次点击元素1，使元素2消失，但不与元素1的拖拽效果冲突；
当元素2显示时，按住元素1，元素2跟随拖动

效果：

实现思路：

向元素1添加按下鼠标时调用mousedown事件处理函数
利用mousemove方法的clientX、clientY记录鼠标指针在文档中移动的坐标
松开鼠标时移除mousemove事件
利用时间戳判断鼠标按下与松开的时间间隔来完成鼠标点击效果

实现代码如下（jquery拖拽层演示.html）:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jquery拖拽层演示</title>
    <style type="text/css">
        .div1 { position: fixed; z-index: 1001; }
        .div2 { position: absolute; background-color: pink; width: 50px; height: 50px; z-index: 1002; }
        .div3 { display: none; position: absolute; background-color: aqua; width: 130px; height: 130px; top: -20px; left: 58px; z-index: 1003; }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2" id="icon"></div>
        <div class="div3" id="show"></div>
    </div>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#icon').mousedown(function () { //-----------------向div1添加按住鼠标左键时的事件处理函数
                let $div1 = $(this).parent() //-------------------获取父元素div1
                    , stime = new Date().getTime() //-------------获取时间戳

                $(document).mousemove(function (event) { //-------当鼠标指针在文档中移动时的事件处理函数
                    $div1.find('#icon').css('cursor', 'move') //--当鼠标指针移动时，鼠标指针在div2上变为移动样式
                    $div1.css({
                        top: event.clientY - 25, //---------------同时div1元素跟随鼠标指针移动达到拖拽效果
                        left: event.clientX - 25
                    })

                }).mouseup(function () { //-----------------------当鼠标左键松开时的操作
                    $(this).off('mousemove') //-------------------document移除mousemove事件
                    $div1.find('#icon').css('cursor', 'pointer') //div2恢复鼠标指针抓手样式

                    if (new Date().getTime() - stime < 150) { //--如果鼠标左键按下的时间戳与松开时的间隔小于150毫秒，则视为click点击事件
                        $('#show').toggle(100)
                    }
                })
            })
        })
    </script>
</body>
</html>

新人发帖，请多指教~~~