var offset, dimensions; var draggable = document.getElementById("draggable"); function dragStart(e) { if (e.touches && e.touches.length > 1) return; var position = draggable.getBoundingClientRect(); var pointer = e.touches ? e.touches[0] : e; offset = { left: pointer.pageX - position.left, top: pointer.pageY - position.top }; dimensions = { width: position.width, height: position.height }; window.addEventListener("mousemove", dragMove, false); window.addEventListener("mouseup", dragEnd, false); window.addEventListener("touchmove", dragMove, false); window.addEventListener("touchend", dragEnd, false); e.preventDefault(); } function dragMove(e) { var pointer = e.touches ? e.touches[0] : e; var posX = pointer.pageX - offset.left; var posY = pointer.pageY - offset.top; if (posX > 0 && (posX + dimensions.width) < window.innerWidth) { draggable.style.left = "" + posX + "px"; } if (posY > 0 && (posY + dimensions.height) < window.innerHeight) { draggable.style.top = "" + posY + "px"; } e.preventDefault(); } function dragEnd(e) { offset = dimensions = null; window.removeEventListener("mousemove", dragMove, false); window.removeEventListener("mouseup", dragEnd, false); window.removeEventListener("touchmove", dragMove, false); window.removeEventListener("touchend", dragEnd, false); } draggable.addEventListener("mousedown", dragStart, false); draggable.addEventListener("touchstart", dragStart, false);