程序博客网 > php登陆页面实例

jQuery实践之拖动Div

来源：互联网发布：php登陆页面实例编辑：程序博客网时间：2024/05/20 06:27

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        var bool = false;
        var offsetX = 0;
        var offsetY = 0;
        $('document').ready(function () {
            $("#DragTitle").mousedown(function (event) {
                bool = true;
                offsetX = event.offsetX ? event.offsetX : event.layerX;
                offsetY = event.offsetY ? event.offsetY : event.layerY;
                $("#DragTitle").css('cursor', 'move');
            })
        .mouseup(function () {
            bool = false;
        })
            $(document).mousemove(function (event) {
                if (!bool) {
                    return;
                }
                else {
                    var x = event.clientX - offsetX;
                    var y = event.clientY - offsetY;
                    $("#DragBody").css("position", "absolute");
                    $("#DragBody").css("left", x);
                    $("#DragBody").css("top", y);
                }
            })
        });
</script>
</head>
<body>
    <form id="form2" runat="server">
    <div id="DragBody" style="width: 300px; height: 200px;">
        <div id="DragTitle" style="height: 20px; background-color: #0066FF;">
            Title
        </div>
        <div id="DragContainer" style="height: 180px; background-color: #99CCFF;">
            内容
        </div>
    </div>
    </form>
</body>
</html>

php登陆页面实例

php登陆页面实例

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子 ui设计趋势 ui外包 ui设计培训机构哪家好 ui培训哪个好 ui设计怎么样 ui动效 ui设计课程介绍 ui设计师好找工作吗 ui设计的发展前景 ui图标制作 ui设计在线培训 ui设计职业规划 ui和web前端的区别 ui设计原则 ui的意思如何学习ui设计国外ui界面设计 ui设计哪家好什么叫ui设计 ui设计好找工作吗 ui素材高级ui设计培训学ui好找工作吗 ui怎么学 ui设计界面 ui全称学ui设计去哪培训机构 ui怎么念 ui设计需要会什么 ui是干什么的平面ui ui视觉设计 ui交互设计师电脑ui ui培训哪家好 ui怎么界面ui ui交互设计是什么 ui设计师培训课程想学ui设计软件ui