Skip to content

Instantly share code, notes, and snippets.

@lyquix-owner
Last active October 5, 2016 20:59
Show Gist options
  • Save lyquix-owner/d9aab8303259a27011782dfa4212dd85 to your computer and use it in GitHub Desktop.
Save lyquix-owner/d9aab8303259a27011782dfa4212dd85 to your computer and use it in GitHub Desktop.
Pure Javascript drag-n-drop functionality
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment