利用jquery 使DIV可拖拽

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <style type="text/css">
        #mydiv1{
            background:yellow;
            width:300px;
            height:180px;
            position:absolute;
            z-index:1;
        }
    </style>
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript"><!--
    $(document).ready(function()
    {
        $("#mydiv1").mousedown(function(e)//e鼠标事件
        {
            var mydiv1=$(this);
            $(this).css("cursor","move");//改变鼠标指针的形状
            var offset = $(this).offset();//DIV在页面的位置
            var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
            var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
            $(document).bind("mousemove",function(ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,
                                                            // 而不用DIV元素的事件
            {
                $(mydiv1).stop();//加上这个之后
                var _x = ev.pageX - x;//获得X轴方向移动的值
                var _y = ev.pageY - y;//获得Y轴方向移动的值
                $(mydiv1).animate({left:_x+"px",top:_y+"px"},10);
            });
        });
        $(document).mouseup(function()
        {
            $(mydiv1).css("cursor","default");
            $(this).unbind("mousemove");
        })
    })
    // --></script>
</head>
<body>
<div id='mydiv1'>
    这个是DIV块,鼠标按下拖拽MemoryCat.com
</div>
</body>
</html>
评论列表