Untitled

<html>
<head>
<title>Drag and Drop</title>
<style type="text/css">
#box {
	border: 3px dashed #999;
	background-color: red;
	padding: 3px;
	width: 50px;
	height: 50px;
	border: 3px dashed #999;
	padding: 1px;
	position: absolute;
}

#boxdrop {
	border: 3px dashed #999;
	background-color: blue;
	padding: 3px;
	width: 460px;
	height: 200px;
	margin: 100 100 100 100;
	position: absolute;
	float: left;
}

#red {
	border: 3px dashed #999;
	background-color: red;
	padding: 3px;
	width: 50px;
	height: 50px;
	border: 3px dashed #999;
	padding: 1px;
	position: absolute;
}

#blue {
	border: 3px dashed #999;
	background-color: blue;
	padding: 3px;
	width: 460px;
	height: 200px;
	margin: 100 100 100 100;
	position: absolute;
	float: left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<script type="text/javascript">
	function cancelEvent(e) {
		e = e ? e : window.event;
		if (e.stopPropagation)
			e.stopPropagation();
		if (e.preventDefault)
			e.preventDefault();
		e.cancelBubble = true;
		e.cancel = true;
		e.returnValue = false;
		return false;
	}
	function addEvent(type, el, handler, bubbling) {
		if (document.addEventListener) {
			document.addEventListener(type, handler, bubbling);
		} else if (document.attachEvent) {
			el.setCapture();
			el.attachEvent("on" + type, handler);
		}
	}
	function removeEvent(type, el, handler, bubbling) {
		if (document.removeEventListener) {
			document.removeEventListener(type, handler, bubbling);
		} else if (document.detachEvent) {
			el.detachEvent("on" + type, handler);
			el.releaseCapture();
		}
	}

	function mouseDown(event) {
		var elementToDrag = document.getElementById(dragobj);
		var targetNode = document.getElementById(dropArea);
		var elementToDrag2 = elementToDrag.cloneNode(true);
		document.body.appendChild(elementToDrag2);

		var startX = event.clientX, startY = event.clientY;
		var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
		var deltaX = startX - origX, deltaY = startY - origY;

		addEvent("mousemove", elementToDrag, moveHandler, true);
		addEvent("mouseup", elementToDrag, upHandler, true);

		cancelEvent(event);

		function computeDistance(e) {
			e = e ? e : window.event;
			var t1 = targetNode.offsetLeft;
			var t2 = t1 + targetNode.offsetWidth;
			var t3 = targetNode.offsetTop;
			var t4 = t3 + targetNode.offsetHeight;
			var isSatisfied = (t1 < e.clientX) && (t2 > e.clientX) && (t3 < e.clientY) && (t4 > e.clientY);

			if (isSatisfied) {
				alert("Drop!");
			}
			elementToDrag2.style.visibility = 'hidden';
			return cancelEvent(e);
		}

		function moveHandler(e) {
			e = e ? e : window.event;
			elementToDrag2.style.visibility = 'visible';
			elementToDrag2.style.left = (e.clientX - deltaX) + "px";
			elementToDrag2.style.top = (e.clientY - deltaY) + "px";

			return cancelEvent(e);
		}

		function upHandler(e) {
			e = e ? e : window.event;
			computeDistance(e);
			removeEvent("mouseup", elementToDrag, upHandler, true);
			removeEvent("mousemove", elementToDrag, moveHandler, true);

			return cancelEvent(e);
		}
	}

	function setupEvents() {
		addEvent("mousedown", document.getElementById(dragobj), mouseDown, true);
	}

	var dragobj = "box";
	var dropArea = "boxdrop";
	//var dragobj = "red";
	//var dropArea = "blue";
	window.onload = setupEvents;
</script>
</head>
<body>
<div id="box">1</div>
<div id="boxdrop"></div>


<div id="red">1</div>
<div id="blue"></div>
</body>
</html>