Edit in JSFiddle

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