可拖动的DIV

最新推荐文章于 2025-07-31 15:56:25 发布

pengdayong77

最新推荐文章于 2025-07-31 15:56:25 发布

阅读量560

点赞数

分类专栏： html

html 专栏收录该内容

41 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"
    type="text/javascript"></script>
    <style type="text/css">
    .drag{
          position:absolute;
          width:100px; height:100px;
          border:1px solid #96C2F1; background-color: #EFF7FF;
          cursor:move; line-height:100px; text-align:center;
    }
    </style>
    <script type="text/javascript">
        (function (document) {
            //Usage: $("#id").drag() 
            //Author: hooyes
            $.fn.Drag = function () {
                var M = false;
                var Rx, Ry;
                var t = $(this);
            t.mousedown(function (event) {
                      Rx = event.pageX - (t.offset().left || 0);
                    Ry = event.pageY - (t.offset().top || 0);
                    t.css("position", "absolute").css('cursor', 'move').fadeTo(20, 0.5);
                    M = true;
                })
            .mouseup(function (event) {
                M = false; t.fadeTo(20, 1);
            });
                $(document).mousemove(function (event) {
                    if (M) {
                        t.css({ top: event.pageY - Ry, left: event.pageX - Rx });
                    }
                });
            }
        })(document);
 
 
        $(document).ready(function () {
            $("#Div1").Drag();
        });
    </script>
</head>
<body>
<div id="Div1" class="drag">我是DIV1</div>
</body>
</html>