拖拽与光标信息

demo如下 : demo

---

使用.onmousedown获取鼠标与目标dv的offset与client,以此来得出dv的left与top值,并使得这两个值与鼠标的位置有关,从而达到鼠标动,dv动的效果,再通过onmousemove方法在移动鼠标的同时获取其数据,并打印在网页上.最后添加onmouseup效果,在松开鼠标的时候清除move函数.

var dv = document.querySelector(".block")
var p0 = document.querySelectorAll("p")[0]
var p1 = document.querySelectorAll("p")[1]
var p2 = document.querySelectorAll("p")[2]
dv.onmousedown =function(e){
	e = e||window.event
	var _x = e.offsetX
	var _y = e.offsetY
	var dv_w = parseFloat(getComputedStyle(dv).width)
	var dv_h = parseFloat(getComputedStyle(dv).height)
	var right0 = document.documentElement.clientWidth - dv_w 
	var bottom0 = document.documentElement.clientHeight - dv_h
	 document.onmousemove = function(e){
	
		e = e||window.event
		var _top = e.clientY - _x
		var _left = e.clientX - _y
		
		if(_left <= 0){
			_left = 0
		}
		if(_top <= 0){
			_top = 0
		}
		if(_left >= right0 - dv_w){
			_left = right0 - dv_w
		}
		if(_top >= bottom0 - dv_h){
			_top = bottom0 - dv_h
		}
		
		dv.style.left = _left + "px"
		dv.style.top = _top + "px"
	}
	dv.addEventListener("mousemove",function(e){
		e = e||window.event
		
		p0.innerText = "offsetX:" + e.offsetX + " offsetY:" + e.offsetY
		p1.innerText = "clientX:" + e.clientX + " clientY:" + e.clientY
		p2.innerText = "pageX:" + e.pageX + " pageY:" + e.pageY
		
	})
}
document.onmouseup = function(){
	document.onmousemove = null
}