JS拖拽元素实现

再附上JS，然后我再讲下原理：

function getByClassName(className,parent) {
	var oParent = parent ? document.getElementById(parent) : document,
		eles = [],
		elements = oParent.getElementsByTagName('*');
	for(var i = 0, l = elements.length; i < l; i++) {
		if(elements[i].className == className) {
			eles.push(elements[i]);
		}
	}
	return eles;
}

function drag() {
	var oTitle = getByClassName('test','demo')[0];
	oTitle.onmousedown = fnDown;
}

function fnDown(event) {
	var e = event || window.event,
		oDrag = document.getElementById("demo"),
		startPos = {
			x : e.clientX - oDrag.offsetLeft,
			y : e.clientY - oDrag.offsetTop
		}
	document.onmousemove = function(event) {
		var event = event || document.event,
			posX = event.clientX - startPos.x,
			posY = event.clientY - startPos.y,
			maxW = getSize().w - oDrag.offsetWidth,
			maxH = getSize().h - oDrag.offsetHeight;
			console.log(getSize().h);
			if(posX < 0) {
				posX = 0;
			} else if(posX > maxW) {
				posX = maxW;
			}

			if(posY < 0) {
				posY = 0;
			}else if(posY > maxH) {
				posY = maxH;
			}

			oDrag.style.left = posX + 'px';
			oDrag.style.top = posY + 'px';
	}

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

function getSize() {
	return {
		w : document.documentElement.clientWidth || document.body.clientWidth,
		h : document.documentElement.clientHeight || document.body.clientHeight
	}
}

window.onload = drag;

原理其实很简单： 首先我们要分析在这其中牵涉的鼠标事件有： mousedown,mousemove,mouseup这三个事件，还有要明白的一点，能拖拽的元素的定位必须是脱离文档流的，也就是定位为absolute；

在鼠标按下之前，我们通过定位鼠标的位置，这时候，再在鼠标移动时再对鼠标定位，然后再设置元素的相应属性，当然这是原生的js，所以要明白这几种具体的属性值及特点，详细可以参看JS中定位相关详细介绍！