js 拖拽

原创 1130331201 随笔 JS 72阅读 9 天前 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js拖拽</title>

    <style>
        .drag{width: 100px;height: 100px;position: absolute;left: 0;top: 0;background: #f00;}
    </style>
</head>
<body>

    <div class="drag"></div>

    <script type="text/javascript" src="jquery.min.js" ></script>

    <script>
        var div=document.getElementsByTagName('div')[0];
        var disX,disY;
        div.onmousedown=function(e){
            var event=e ||event;
            disX=event.pageX-div.offsetLeft;
            disY=event.pageY-div.offsetTop;
            document.onmousemove=function(e){

                var event=e || window.event;
                div.style.left=event.pageX-disX+'px';
                div.style.top=event.pageY-disY+'px';

            }
            document.onmouseup=function(){
                document.onmousedown=null;
                document.onmousemove=null;
            }

            return false;//修复第二次拖拽出现鬼影

        }

    </script>
</body>

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复