Edit in JSRUN

console 命令行工具 X clear

                    
>
console
window.onload = function () {
    var myDiv = document.getElementById('drag'),
        closeDiv = firstChild(myDiv);
    addEvent(myDiv, "mousedown", drag);
    addEvent(myDiv, "mouseup", undrag);
    addEvent(closeDiv, "click", close);
    function drag (event) {
        //鼠标按下时,鼠标与盒子之间的距离
        var xx = event.clientX - myDiv.offsetLeft,
            xy = event.clientY - myDiv.offsetTop,
            maxW = (document.documentElement.clientWidth || document.body.clientWidth) - myDiv.offsetWidth - 10,
            maxY = (document.documentElement.clientHeight || document.body.clientHeight) - myDiv.offsetHeight;
        document.onmousemove = function (e) {
            l = e.clientX - xx;
            t = e.clientY - xy;
            if (l <= 0) {
                l = 0;
            } else if (l > maxW) {
                l = maxW;
            }
            if (t <= 10) {
                t = 10;
            } else if (t > maxY) {
                t = maxY
            }
            myDiv.style.left = l + "px";
            myDiv.style.top = t + "px";
        }
    }
    function addEvent (e, type, handle) {
		if (e.addEventListener) {
			e.addEventListener(type, handle);
		} else if (e.attchEvent) {
			e.attchEvent("on" + type, handle);
		} else {
			e["on" + type] = handle;
		}
	}
    function firstChild (e) {
		var childList = e.childNodes,
			len = childList.length;
		for (var i = 0; i < len; i++) {
			if (childList[i].nodeType == 1 && childList[i].tagName == 'DIV') {
				return childList[i];
			}
		}
		return null;
	}
    function undrag () {
        document.onmousemove = 'null';
    }
    function close () {
        this.parentNode.style.display = "none";
    }
}
<body>
    <div id="drag">
    <div class="close"></div>
    <div class="logo"></div>
        <div class="scanner">
            <p>账  号:<input type="text" name="username" /></p>
            <p>密  码:<input type="password" name="password" /></p>
        </div>
    </div>
</body>
#drag {width: 500px; height: 300px; position: absolute; top: 200px; left: 200px; background-color: #F6F6F6; border: 2px solid #ddd;border-radius: 15px; }
#drag>div.close {width:28px; height:28px; cursor:pointer; background: url(http://sandbox.runjs.cn/uploads/rs/186/mf579xno/boxy_btn.png); position:absolute; top:-10px; right:-10px; }
#drag>div.logo {background: url(http://sandbox.runjs.cn/uploads/rs/186/mf579xno/login_window_logo.png) no-repeat -201px -0px; width:200px; height:44px; margin: 20px auto 0 auto; cursor: move}
#drag>div.scanner {margin: 30px auto 0 auto; width:240px; font:bold 15px 微软雅黑;}
#drag>div.scanner input {color:#888; border-radius: 8px;}