jquery_拖动事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div class="box" style="width: 600px;position: absolute;border: red 1px solid">
        <div id="title" style="height: 40px;color:white;background-color: black">内容</div>
        <div style="height: 200px">标题</div>
    </div>

    <script src="jquery-3.5.1.js"></script>
    <script>

        $('#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).mousemove(function (event) {
                var new_x=event.screenX;
                var new_y=event.screenY;

                var new_parent_left=parent_left+new_x-start_x;
                var new_parent_top=parent_top+new_y-start_y;

                $(this).parent().css('left',new_parent_left+"px");
                $(this).parent().css('top',new_parent_top+"px");
            }).mouseup(function () {
                $(this).off("mousemove");
            })

        })

    </script>

</body>
</html>
jquery_拖动事件

推荐阅读
