cold-coder/dragAnywhere.html

## dragAnywhere.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title></title>
		<style>
		html{
			height: 100%;
		}
		body{
			height:100%;
		}
		aside {
			position:  absolute;
			left: 50%;
			top: 50%; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
			width: 25px;
			height:25px;
			text-align:center;
			background: rgba(255,255,255,0.66);
			border: 2px  solid rgba(0,0,0,0.5);
			border-radius: 25px; padding: 8px;
			cursor:all-scroll;
			-webkit-transition: all 0.3s ease-in-out 0s;
			transition: all 0.3s ease-in-out 0s;
		}
		aside:hover{
			background-color:rgba(245, 143, 143, 0.68);
			border-radius: 25px;
		}
		</style>
	</head>
	<body>
	<aside draggable="true" id="dragme">
    D
	</aside>

	<script>
		function drag_start(event) {
			var style = window.getComputedStyle(event.target, null);
			//console.log("left = "+parseInt(style.getPropertyValue("left"),10)+" | clientX = "+event.clientX);
			//console.log("screenX = "+event.screenX +" | clientX = "+ event.clientX);
			event.dataTransfer.setData("text/plain",
			(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
		}
		function drag_over(event) {
			event.preventDefault();
			return false;
		}
		function drop(event) {
			var offset = event.dataTransfer.getData("text/plain").split(',');
			var dm = document.getElementById('dragme');
			dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
			dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
			event.preventDefault();
			return false;
		}
		var dm = document.getElementById('dragme');
		dm.addEventListener('dragstart',drag_start,false);
		document.body.addEventListener('dragover',drag_over,false);
		document.body.addEventListener('drop',drop,false);

	</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<style>
	html{
	height: 100%;
	}
	body{
	height:100%;
	}
	aside {
	position: absolute;
	left: 50%;
	top: 50%; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
	width: 25px;
	height:25px;
	text-align:center;
	background: rgba(255,255,255,0.66);
	border: 2px solid rgba(0,0,0,0.5);
	border-radius: 25px; padding: 8px;
	cursor:all-scroll;
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	}
	aside:hover{
	background-color:rgba(245, 143, 143, 0.68);
	border-radius: 25px;
	}
	</style>
	</head>
	<body>
	<aside draggable="true" id="dragme">
	D
	</aside>

	<script>
	function drag_start(event) {
	var style = window.getComputedStyle(event.target, null);
	//console.log("left = "+parseInt(style.getPropertyValue("left"),10)+" \| clientX = "+event.clientX);
	//console.log("screenX = "+event.screenX +" \| clientX = "+ event.clientX);
	event.dataTransfer.setData("text/plain",
	(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
	}
	function drag_over(event) {
	event.preventDefault();
	return false;
	}
	function drop(event) {
	var offset = event.dataTransfer.getData("text/plain").split(',');
	var dm = document.getElementById('dragme');
	dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
	dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
	event.preventDefault();
	return false;
	}
	var dm = document.getElementById('dragme');
	dm.addEventListener('dragstart',drag_start,false);
	document.body.addEventListener('dragover',drag_over,false);
	document.body.addEventListener('drop',drop,false);

	</script>
	</body>
	</html>