High performance touch interaction demos

Updated demos for http://maketea.co.uk/2015/02/16/high-performance-touch-interactions.html

by cssGuy

HTML

<div id="draggable"></div>

CSS

body {
    margin: 0;
    background: url(http://subtlepatterns.com/patterns/swirl_pattern.png);
}

#draggable {
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba(174,188,191,0.75) 0%,rgba(110,119,116,0.63) 50%,rgba(10,14,10,0.63) 51%,rgba(10,8,9,0.5) 100%);
    box-shadow: 0 0 20px rgba(10, 10, 10, .75);
    cursor: move;
}

JavaScript

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);