夜微凉、的博客

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
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 src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>
    <style>
        #show {
            width: 250px;
            height: 300px;
            background-color: orange;
            cursor: pointer;
            position: absolute;
            top: 100px;
        }
    </style>
    <div id="show">
        <p>窗前明月光</p>
    </div>
    <script>

        $("#show").mousedown(function (event) {
            var offset = $("#show").offset();
            x1 = event.clientX - offset.left;
            y1 = event.clientY - offset.top;

            $(document).mousemove(function (event) {
                if (!isNaN(event.clientX) && !isNaN(event.clientY)) {
                    $("#show").css("left", (event.clientX - x1) + "px");
                    $("#show").css("top", (event.clientY - y1) + "px");
                }
            });
            $("#show").mouseup(function (event) {
                $(document).unbind("mousemove");
            });
        });

        // $(document).keydown(function (event) {
        //     var keyCodeValue = event.keyCode;
        //     var offsetValue = $("#show").offset();

        //     if (keyCodeValue == 46) {
        //         $("#show").remove();
        //     }
        //     switch (keyCodeValue) {
        //         case 37: $("#show").offset({ left: (offsetValue.left - 1) });
        //             break;
        //         case 38: $("#show").offset({ top: (offsetValue.top - 1) });
        //             break;
        //         case 39: $("#show").offset({ left: (offsetValue.left + 1) });
        //             break;
        //         case 40: $("#show").offset({ top: (offsetValue.top + 1) });
        //             break;
        //     }
        // });
    </script>
</body>

</html>

 

posted on 2021-03-05 19:51  夜、微凉  阅读(478)  评论(0)    收藏  举报