jq 拖拽

1.尼玛, move事件的时候忘了加ev,找了一个多小时

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0; padding: 0}
        #div1{width: 100px; height: 100px; background: red; position: absolute; left: 100px;
            top: 100px;}
    </style>
    <script src="jquery-1.12.3.min.js"></script>
    <script>
        $(function(){
            var disX = 0;
            var disY = 0;
            var $div1 = $("#div1");
            $div1.on('mousedown',function(ev){
                disX = ev.pageX - $(this).offset().left;
                disY = ev.pageY - $(this).offset().top;
                $(document).on('mousemove',function(ev){//此处忘了加ev, 找了一个多小时!
                    var left = ev.pageX - disX;
                    var top = ev.pageY - disY;
                    console.log(left+":"+top)
                    $div1.css('left',left);
                    $div1.css('top',top );
                });
                $(document).on('mouseup',function(){
                    console.log("off")
                    $(this).off();
                });
                return false;//按下的时候阻止默认事件
            })
        });
    </script>
</head>
<body style="height: 2000px">
    <div id="div1">divdiv</div>
</body>
</html>

　　

posted @ 2016-11-20 22:31  黑土白云  阅读(172)  评论(0)    收藏  举报