以下是HTML页面的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中国的流浪猫</title> <link rel="stylesheet" type="text/css" href="regality.css"> </head> <body> <div style="width: 200px;height: 200px;background-color: green;position: absolute;left: 0;top: 0"> </div> <script type="text/javascript" src="lesson.js"> </script> </body> </html> var div = document.getElementsByTagName('div')[0]; function drag(elem) { var disX, disY; addEvent(elem, 'mousedown', function(e) { var event = e || window.event; disX = event.clientX - parseInt(getStyle(elem, 'left')); disY = event.clientY - parseInt(getStyle(elem, 'top')); addEvent(document, 'mousemove', mouseMove); addEvent(document, 'mouseup', mouseUp); stopBubble(event); cancelHandler(event); }); function mouseMove(e) { var event = e || window.event; elem.style.left = event.clientX - disX + 'px'; elem.style.top = event.clientY - disY + 'px'; }; function mouseUp(e) { var event = e || window.event; document.removeEventListener( 'mousemove', mouseMove); document.removeEventListener('mouseup', mouseUp); }; } drag(div); //封装方法，查询dom元素的样式， //prop（元素的属性）传参数的时候的传字符串形式 function getStyle(elem, prop) { if (window.getComputedStyle) { return window.getComputedStyle(elem, null)[prop]; } else { return elem.currentStyle[prop]; } } //封装方法，给dom元素添加事件类型函数，elem指代dom元素，type指代事件类型（例如'click'),handle指代函数 function addEvent(elem, type, handle) { if (elem.addEventListener) { elem.addEventListener(type, handle, false) } else if (elem.attachEvent) { elem.attachEvent('on' + type, function() { handle.call(elem); }) } else { elem['on' + type] = handle; } } //封装方法，取消冒泡 function stopBubble(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } //封装方法，取消默认 function cancelHandler(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }