jQuery div鼠标移动效果

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery-1.7.2.min.js"></script>
    <title></title>
    <style>
        * {
            margin:0px;
            padding:0px;
        }
        .a {
            position:fixed;
            width:100%;
            height:100%;
            background-color:red;
        }
        .aa {
            height: 100px;
            width: 200px;
            position: absolute;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="a">
    <div class="aa"></div>
        </div>
    <div style="position:absolute;z-index:1;"><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
</body>
</html>
<script>

    $(".aa").mousedown(function (e) {
        //设置移动后的默认位置
        var endx = 0;
        var endy = 0;

        //获取div的初始位置，要注意的是需要转整型，因为获取到值带px
        var left = parseInt($(".aa").css("left"));
        var top = parseInt($(".aa").css("top"));

        //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
        var downx = e.pageX;
        var downy = e.pageY;   //pageY的y要大写，必须大写！！

        //  鼠标按下时给div挂事件
        $(".a").mousemove("mousemove", function (es) {

            //es.pageX,es.pageY:获取鼠标移动后的坐标
            var endx = es.pageX - downx + left;   //计算div的最终位置
            var endy = es.pageY - downy + top;

            //带上单位
            $(".aa").css("left", endx + "px").css("top", endy + "px")
        });
    })


    $(".aa").mouseup(function () {
    //    鼠标弹起时给div取消事件
        $(".aa").unbind("mousemove");
        $(".a").unbind("mousemove")
    })


    //$(".aa").mousedown(function (e) {
    //    $(document).bind("mousemove", function (e) {
    //        $(".aa").css("left", e.pageX).css("top", e.pageY)
    //    });
    //})
    //$(".aa").mouseup(function () {
    //    $(document).unbind("mousemove")
    //})


</script>
jQuery div鼠标移动效果

推荐阅读
