var offset, dimensions, firstGesture, lastGesture; var draggable = document.getElementById("draggable"); var direction = document.getElementById("direction"); var velocity = document.getElementById("velocity"); var interval = 25; 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 }; firstGesture = lastGesture = { position: [ pointer.pageX, pointer.pageY ], timeStamp: e.timeStamp }; 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; var newGesture = { position: [ pointer.pageX, pointer.pageY ], timeStamp: e.timeStamp }; if ((e.timeStamp - lastGesture.timeStamp) > interval) { var movementVelocity = calculateVelocity(lastGesture, newGesture); var movementDistance = calculateDistance(firstGesture, newGesture); var movementDirection = calculateDirection(lastGesture, newGesture); direction.innerHTML = movementDirection.toString(); velocity.innerHTML = movementVelocity.toString(); distance.innerHTML = movementDistance; lastGesture = newGesture; } if (posX < 0) { posX = 0; } else if ((posX + dimensions.width) > window.innerWidth) { posX = window.innerWidth - dimensions.width; } if (posY < 0) { posY = 0; } else if ((posY + dimensions.height) > window.innerHeight) { posY = window.innerHeight - dimensions.height; } var transformString = "translate3d(" + posX + "px, " + posY + "px, 0)"; draggable.style.webkitTransform = draggable.style.transform = transformString; e.preventDefault(); } function dragEnd(e) { offset = dimensions = firstGesture = lastGesture = null; direction.innerHTML = velocity.innerHTML = distance.innerHTML = ""; window.removeEventListener("mousemove", dragMove, false); window.removeEventListener("mouseup", dragEnd, false); window.removeEventListener("touchmove", dragMove, false); window.removeEventListener("touchend", dragEnd, false); } function calculateDirection(start, end) { var diffX = start.position[0] - end.position[0]; var diffY = start.position[1] - end.position[1]; return [ Math.abs(diffX) > 0 ? (diffX > 0 ? "left" : "right") : "N/A", Math.abs(diffY) > 0 ? (diffY > 0 ? "up" : "down") : "N/A" ]; } function calculateVelocity(start, end) { var deltaTime = end.timeStamp - start.timeStamp; var ratioX = (100 / window.innerWidth) * (start.position[0] - end.position[0]); var ratioY = (100 / window.innerHeight) * (start.position[1] - end.position[1]); return [ Math.abs(ratioX / deltaTime).toFixed(2), Math.abs(ratioY / deltaTime).toFixed(2) ]; } function calculateDistance(start, end) { var x = end.position[0] - start.position[0]; var y = end.position[1] - start.position[1]; return Math.sqrt((x * x) + (y * y)).toFixed(2); } draggable.addEventListener("mousedown", dragStart, false); draggable.addEventListener("touchstart", dragStart, false);