jQuery之拖动面板

最新推荐文章于 2024-06-24 16:05:08 发布

HU_LSS

最新推荐文章于 2024-06-24 16:05:08 发布

阅读量103

点赞数

分类专栏：开发文章标签： jQuery jquery

本文链接：https://blog.csdn.net/weixin_43527195/article/details/114170129

版权

开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery之拖动面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面板</title>
    <script src="jquery-3.5.1.js"></script>
</head>
<body>

    <div style="border: 1px solid gold;width: 500px;position: absolute">
        <div id="title" style="background: black;height: 50px;color: wheat">
            标题
        </div>
        <div id="content" style="background: antiquewhite;height: 400px;color: black">
            内容
        </div>
    </div>
    <script>
        $(function () {
            $('#title').mouseover(function () {
                $(this).css('cursor','move')
            }).mousedown(function (event) {
                var start_x = event.screenX
                var start_y = event.screenY
                
                var parent_left = $(this).parent().offset().left
                var parent_top = $(this).parent().offset().top
                
                $(this).on('mousemove',function (e) {
                    var new_x = e.screenX
                    var new_y = e.screenY

                    var new_parent_x = parent_left+(new_x-start_x)
                    var new_parent_y = parent_top+(new_y-start_y)

                    $(this).parent().css('left',new_parent_x)
                    $(this).parent().css('top',new_parent_y)
                }).mouseup(function () {
                    $(this).off("mousemove")
                })
            })
        })
    </script>
</body>
</html>

HU_LSS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之拖动面板

jQuery之拖动面板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>面板</title> <script src="jquery-3.5.1.js"></script></head><body> <div style="border: 1px soli
复制链接

扫一扫

专栏目录