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中定位相關詳細介紹！