Draggable html elements with Javascript

HTML
<div class="draggable">Draggable Div</div> <span class="draggable">Draggable Span</span> <div class="draggable"> <img src="https://codepad.co/img/avatars/bali.jpg/"> </div>
CSS
.draggable{ display: block; background-color: #6f9ea0; cursor: move; padding:20px; color:#eee; } img{ pointer-events:none; }
JAVASCRIPT
(function(className){ var zIn = 0; function rAt(){ this.removeAttribute("dragActivity"); } function getXY(e){ e = e || window.event; mx = e.clientX || e.pageX; my = e.clientY || e.pageY; return [mx,my]; } function mDown(e){ if(zIn < 2000000000 ){ zIn = zIn + 50; }else{ zIn = 50; } var mXY = getXY(e); xb = mXY[0] - parseInt(this.offsetLeft); yb = mXY[1] - parseInt(this.offsetTop); this.setAttribute("dragActivity","on"); } function mMove(e){ if ( this.getAttribute("dragActivity") == "on" ) { var mXY = getXY(e); this.style.left = mXY[0] - xb +"px"; this.style.top = mXY[1] - yb +"px"; this.style.zIndex = zIn; } } var draggables = document.getElementsByClassName(className),xb=0,yb=0; for(var i=0;i<draggables.length;i++){ var _t = draggables[i]; _t.style.position = "absolute"; _t.onmousedown = mDown; _t.onmouseup = rAt; _t.onmouseout = rAt; _t.onmousemove = mMove; } })("draggable"); //name of the class
Expand for more options Login