lyquix-owner/drag-n-drop.html

## drag-n-drop.html
<html>
<head>
	<style>
	#my-container {
		width: 320px;
		position: relative;
		height: 320px;
		margin: auto;
		background: black;
	}
	#my-elem {
		width: 50px;
		height: 50px;
		position: absolute;
		background: white;
		cursor: move;
	}
	</style>
	<script>
	var drag = {
		init: function(elem, container) {
			document.getElementById(elem).addEventListener('mousedown', function(e){drag.start(elem, container, e);});
			document.getElementById(elem).addEventListener('touchstart', function(e){drag.start(elem, container, e);});
		},
		start: function(elem, container, e) {
			elem = document.getElementById(elem);
			container = document.getElementById(container);
			e = e || window.event;
			// prevent mouse/touch events from triggering other actions
			e.preventDefault();
			// get dimensions and position of container
			var contBox = container.getBoundingClientRect(),
			contWidth = contBox.width,
			contHeight = contBox.height,
			contLeft = contBox.left,
			contTop = contBox.top;
			// get dimensions and relative position of element inside container
			var elemBox = elem.getBoundingClientRect(),
			elemTop = elemBox.top - contTop,
			elemLeft = elemBox.left - contLeft,
			elemWidth = elemBox.width,
			elemHeight = elemBox.height;
			// get position difference of start click/touch relative to element box
			var diffLeft = (e.type == 'touchstart' ? e.touches[0].clientX : e.clientX) - elemLeft,
			diffTop = (e.type == 'touchstart' ? e.touches[0].clientY : e.clientY) - elemTop;
			// create function for handling mouse/touch move event
			var move = function(e){
				e = e || window.event;
				e.preventDefault();
				// calculate the new element position using event position minus difference
				var elemLeft = (e.type == 'touchmove' ? e.touches[0].clientX : e.clientX) - diffLeft,
				elemTop = (e.type == 'touchmove' ? e.touches[0].clientY : e.clientY) - diffTop;
				// limit element inside container
				if (elemLeft < 0) elemLeft = 0;
				if (elemTop < 0) elemTop = 0;
				if (elemLeft + elemWidth > contWidth) elemLeft = contWidth - elemWidth;
				if (elemTop + elemHeight > contHeight) elemTop = contHeight - elemHeight;
				// assign new position to element
				elem.style.left = elemLeft + 'px';
				elem.style.top = elemTop + 'px';
			}
			// add move function to mouse or touch move events
			if(e.type == 'touchstart') {
				document.ontouchmove = move;
				document.ontouchend = function(){document.ontouchmove = function(){};}
			}
			else {
				document.onmousemove = move;
				document.onmouseup = function(){document.onmousemove = function(){};}
			}
		},
		stop: function(elem, container, e) {
			document.onmousemove = document.ontouchmove = function(){}
		}
	};
	drag.init('my-elem', 'my-container');
	</script>
</head>
<body>
	<div id="my-container">
		<div id="my-elem">
		</div>
	</div>
</body>
</html>
	<html>
	<head>
	<style>
	#my-container {
	width: 320px;
	position: relative;
	height: 320px;
	margin: auto;
	background: black;
	}
	#my-elem {
	width: 50px;
	height: 50px;
	position: absolute;
	background: white;
	cursor: move;
	}
	</style>
	<script>
	var drag = {
	init: function(elem, container) {
	document.getElementById(elem).addEventListener('mousedown', function(e){drag.start(elem, container, e);});
	document.getElementById(elem).addEventListener('touchstart', function(e){drag.start(elem, container, e);});
	},
	start: function(elem, container, e) {
	elem = document.getElementById(elem);
	container = document.getElementById(container);
	e = e \|\| window.event;
	// prevent mouse/touch events from triggering other actions
	e.preventDefault();
	// get dimensions and position of container
	var contBox = container.getBoundingClientRect(),
	contWidth = contBox.width,
	contHeight = contBox.height,
	contLeft = contBox.left,
	contTop = contBox.top;
	// get dimensions and relative position of element inside container
	var elemBox = elem.getBoundingClientRect(),
	elemTop = elemBox.top - contTop,
	elemLeft = elemBox.left - contLeft,
	elemWidth = elemBox.width,
	elemHeight = elemBox.height;
	// get position difference of start click/touch relative to element box
	var diffLeft = (e.type == 'touchstart' ? e.touches[0].clientX : e.clientX) - elemLeft,
	diffTop = (e.type == 'touchstart' ? e.touches[0].clientY : e.clientY) - elemTop;
	// create function for handling mouse/touch move event
	var move = function(e){
	e = e \|\| window.event;
	e.preventDefault();
	// calculate the new element position using event position minus difference
	var elemLeft = (e.type == 'touchmove' ? e.touches[0].clientX : e.clientX) - diffLeft,
	elemTop = (e.type == 'touchmove' ? e.touches[0].clientY : e.clientY) - diffTop;
	// limit element inside container
	if (elemLeft < 0) elemLeft = 0;
	if (elemTop < 0) elemTop = 0;
	if (elemLeft + elemWidth > contWidth) elemLeft = contWidth - elemWidth;
	if (elemTop + elemHeight > contHeight) elemTop = contHeight - elemHeight;
	// assign new position to element
	elem.style.left = elemLeft + 'px';
	elem.style.top = elemTop + 'px';
	}
	// add move function to mouse or touch move events
	if(e.type == 'touchstart') {
	document.ontouchmove = move;
	document.ontouchend = function(){document.ontouchmove = function(){};}
	}
	else {
	document.onmousemove = move;
	document.onmouseup = function(){document.onmousemove = function(){};}
	}
	},
	stop: function(elem, container, e) {
	document.onmousemove = document.ontouchmove = function(){}
	}
	};
	drag.init('my-elem', 'my-container');
	</script>
	</head>
	<body>
	<div id="my-container">
	<div id="my-elem">
	</div>
	</div>
	</body>
	</html>