javascript 로 layer 드래그
(div 를 drag 하자)


Intro

 요즘이라고 말하기도 민망할 정도로, javascript 를 통해 div 같은 layer 를 드래그 하는 방법이 이미 오래전부터 많이 사용하고 있습니다. 그리고 jquery 에서도 지원해 주는 것으로 알고 있습니다.

 이렇게 많이 사용하는 기능인데 simple 한 코드를 찾기가 어렵습니다. 그렇다고 기껏 이거하나 하려고 jquery 를 가져다 쓰려니, 배보다 배꼽이 더 큽니다. 개인적으로는 웬만한건 그냥 다 만들어 사용합니다. 기능하나 때문에 플렛폼을 가져다 쓰긴 싫거든요.(물론 javascript 가 너무나 쉬운 언어 - doctype - 라는 것도 한몫 합니다.)



Intent

각설하고 코드는 아래와 같습니다.

참고로 layer 갯수에는 제한이 없습니다. 만들고 싶은 만큼 만들면 됩니다.

아, 꼭 div 일 필요 또한 없습니다.




var WinDrag = function(layer) {
	var isFirstMove = true;
	WinDrag.selectedLayer = layer;
	layer.style.position = "absolute";
	layer.onmousedown = onDragStart;
	layer.setAttribute("isOnDragging", "false");
	document.onmousemove = onDragging;
	document.onmouseup = onDragStop;

	function getWindowWidth() {
		var width = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			width = window.innerWidth;
		} else if( document.documentElement && ( document.documentElement.clientWidth) ) {
			//IE 6+ in 'standards compliant mode'
			width = document.documentElement.clientWidth;
		} else if( document.body && ( document.body.clientWidth) ) {
			//IE 4 compatible
			width = document.body.clientWidth;
		}
		return width;
	}

	function getWindowHeight() {
		var height = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			height = window.innerHeight;
		} else if( document.documentElement && (document.documentElement.clientHeight) ) {
			//IE 6+ in 'standards compliant mode'
			height = document.documentElement.clientHeight;
		} else if( document.body && (document.body.clientHeight ) ) {
			//IE 4 compatible
			height = document.body.clientHeight;
		}
		return height;
	}

	function onDragStart() {
		WinDrag.selectedLayer = this;
		WinDrag.selectedLayer.setAttribute("isOnDragging", "true");
	}

	function onDragStop() {
		isFirstMove = true;
		WinDrag.selectedLayer.setAttribute("isOnDragging", "false");
	}

	function onDragging(e) {
		if(WinDrag.selectedLayer.getAttribute("isOnDragging") == "false") { return; }
		
		var mouse = document.all ? event : e;

		if(isFirstMove == true) {
			WinDrag.selectedLayer.setAttribute("orgX", mouse.clientX - WinDrag.selectedLayer.offsetLeft);
			WinDrag.selectedLayer.setAttribute("orgY", mouse.clientY - WinDrag.selectedLayer.offsetTop);
			isFirstMove = false;
		}

		var left = mouse.clientX - WinDrag.selectedLayer.getAttribute("orgX");
		var top = mouse.clientY - WinDrag.selectedLayer.getAttribute("orgY");
		
		WinDrag.selectedLayer.style.top = (top >= 0 ? (top + WinDrag.selectedLayer.clientHeight >= getWindowHeight() ? getWindowHeight() - WinDrag.selectedLayer.clientHeight : top) : 0) + "px";
		WinDrag.selectedLayer.style.left = (left >= 0 ? (left + WinDrag.selectedLayer.clientWidth >= getWindowWidth() ? getWindowWidth() - WinDrag.selectedLayer.clientWidth : left) : 0) + "px";
	}
}




사용법은 아래와 같습니다.

new WinDrag(document.getElementById("a"));


즉, new WindDrag([Element]); 입니다.



Result

 






'Web' 카테고리의 다른 글

PHP Web Framework - Phalcon  (2) 2015.03.12
jPsdReader - javascript library  (0) 2014.09.24