JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<div id="father" style="border:0px solid red;width:200px;">
		<div id="a" style="background:red;width:100px;height:100px">长,宽都是100px</div>
		<div id="b" style="border-top:0px solid red;background:yellow;width:100px;height:100px;margin-left:100px;"></div>
	</div>
	<table>
		<tr>
			<td>pageX:<span id="pageX"></span></td>
			<td>clientX:<span id="clientX"></span></td>
			<td>scrollLeft:<span id="scrollLeft"></span></td>
			<td>screenX:<span id="screenX"></span></td>
			<td>offsetX:<span id="offsetX"></span></td>
		</tr>
		<tr>
			<td>pageY:<span id="pageY"></span></td>
			<td>clientY:<span id="clientY"></span></td>
			<td>scrollTop:<span id="scrollTop"></span></td>
			<td>screenY:<span id="screenY"></span></td>
			<td>offsetY:<span id="offsetY"></span></td>
		</tr>
	</table>
	     
    <div id="oDiv">拖动我移动</div>

CSS

#oDiv{ width:200px; height:200px; color:#fff;background:#00C; position:absolute; top:200px; left:200px; z-index:100;overflow:hidden;}

JavaScript

function pageXY(e) {
			var event = e || window.event;

			var doc = document.documentElement,
				body = document.body;

			// IE
			if (event.pageX == null && event.clientX !=  null ) {
				var doc = document.documentElement, 
					body = document.body;

				event.pageX = event.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );

				event.pageY = event.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );

				return {
					x : event.pageX,
					y : event.pageY
				}
			}

			// firefox
			return {
				x : event.pageX,
				y : event.pageY
			}
		}

		function offsetXY(e) {
			var event = e || window.event;
			return {
				 x:event.offsetX || event.layerX, 
                 y:event.offsetY || event.layerY 
			}
		}
		var $=function(id){
			return ("string"==typeof id) ? document.getElementById(id):id;
		};
		$('a').onmousemove = function(e){
			text(e);
		}
		$('b').onmousemove = function(e){
			text(e);
		}

		
		function text(e) {
			e = e || window.event;
			var offset = offsetXY(e),
				page = pageXY(e);

			var doc = document.documentElement,
				body = document.body;

			$("pageX").innerHTML= page.x;
			$("pageY").innerHTML= page.y;
			$("clientX").innerHTML=e.clientX;
			$("clientY").innerHTML=e.clientY;
			$("screenX").innerHTML=e.screenY;
			$("screenY").innerHTML=e.screenY;
			$("scrollTop").innerHTML=doc && doc.scrollTop;
			$("scrollLeft").innerHTML=doc && doc.scrollLeft;
			$("offsetX").innerHTML = offset.x;
			$("offsetY").innerHTML = offset.y;
		}

		
            var oDiv = document.getElementById("oDiv");//oDiv必须使用CSS定位 
            oDiv.onmousedown = drag; 
            function drag(evt) { 
                evt = evt || window.event; 
                this.onmouseup = drop; 
                this.onmousemove = moveDiv; 
                this.offset = { 
                    x:evt.offsetX ||...