由于每次我自己都要忘记这个东西,所以我还是记录下来比较好。趁现在记得着..

以前写过拖动div的效果,那个是对于文档父类的，只需要绝对定位坐标就可以拖动，这次写的是对于窗口的相对坐标拖动。

这图有毒..

<style>
        *{
            margin:0;
            padding:0;
        }
        #warp{
            background-color:#00a0d2;
            width:400px;
            height:400px;
            margin:50px 100px;
            position:relative;
        }
        #move{
            width:50px;
            height:50px;
            background-color: #18cb2e;
            position:absolute;
            cursor:grab;
        }
    </style>

<div id="warp">
    <div id="move">

    </div>
</div>

<script>
    $(function(){
        $("#move").mousedown(function(e){
            var offset = $(this).offset();//获取offset信息
            //使用event属性获取鼠标离文档左侧距离减去元素左侧距离距离,y则为文档上方
            var x = e.clientX - offset.left;
            var y = e.clientY - offset.top;
            //绑定移动事件
            $("#warp").bind("mousemove",function(ev){
                //停止浏览器默认事件
                $(this).stop();
                //同样获取当前移动的元素offset信息
                var offsets = $(this).offset(),
                    move_x = ev.clientX - x,//这里减去鼠标按下获取的x值
                    move_y = ev.clientY - y,//同样
                    //上面2步的意思是让在拖动的时候鼠标不会瞬间移动(违和感)
                    //获取相对位置
                    xx = move_x-offsets.left,
                    yy = move_y-offsets.top,
                    w = $(this).width()-$("#move").width(),//计算最大x
                    h = $(this).height()-$("#move").height();//计算最大y
                if(xx<=0||yy<=0||xx>w||yy>h){//判断是否在warp里面移动
                    return false;
                }
                //设置元素位置
                $("#move").css({left:xx+"px",top:yy+"px"},0);
            });
        });
        //解除绑定
        $(document).mouseup(function(){
            $("#warp").unbind("mousemove");
        })
    })

</script>

   解释全在注释里面,别忘记导入jq库哦