jq 拖拽 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
    background:pink;
    height:100px;
    width:100px;
    position:absolute;
    }
</style>
<script type="text/javascript" src="jquery-1.11.2.js" ></script>
<script>
    $(function ()
    {
        var disX = 0;
        var disY = 0;
        $('div').mousedown(function (ev)
        {
            disX = ev.pageX - $(this).offset().left;
            disY = ev.pageY - $(this).offset().top;
            $(document).mouseover(function (ev)
            {
                $('div').css('left',ev.pageX - disX);
                $('div').css('top',ev.pageY - disY);
            })
            
            $(document).mouseup(function ()
            {
                $(document).off();
            })
        })
    })
</script>
</head>

<body>
<div></div>
</body>
</html>

 

posted @ 2015-02-28 00:31  mayufo  阅读(258)  评论(0)    收藏  举报