Flying box

by ostapische

HTML

<div id="box" style="position: absolute; left: 0px; top: 0px; background-color: gray; width: 50px; height: 50px;"></div>

JavaScript

window.addEventListener( "load", function( windowLoadE ) {
    var box = document.getElementById( "box" );
    window.boxSettings = { pressed: false, moved: true, left: 0, top: 0, x: 0, y: 0 };
    box.addEventListener( "mousedown", function( boxMouseDownE ) {
        window.boxSettings.pressed = true;
        window.boxSettings.x = boxMouseDownE.pageX;
        window.boxSettings.y = boxMouseDownE.pageY;
    } );
    window.addEventListener( "mouseup", function( windowMouseUpE ) {
        window.boxSettings.pressed = false;
        window.boxSettings.x = 0;
        window.boxSettings.y = 0;
    } );
    window.addEventListener( "mousemove", function( windowMouseMoveE ) {
        if ( window.boxSettings.pressed && window.boxSettings.moved ) {
            window.boxSettings.moved = false;
            
            window.boxSettings.left += windowMouseMoveE.pageX - window.boxSettings.x;
            window.boxSettings.top += windowMouseMoveE.pageY - window.boxSettings.y;
            window.boxSettings.x = windowMouseMoveE.pageX;
            window.boxSettings.y = windowMouseMoveE.pageY;
            
            var box = document.getElementById( "box" );
            
            // box.style.left = window.boxSettings.left + "px";
            // box.style.top = window.boxSettings.top + "px";
            
            box.style.msTransform = "translate( " + window.boxSettings.left + "px, " + window.boxSettings.top + "px )";
            box.style.webkitTransform = "translate( " + window.boxSettings.left + "px, " + window.boxSettings.top + "px )";
            box.style.mozTransform = "translate( " + window.boxSettings.left + "px, " + window.boxSettings.top + "px )";
            box.style.oTransform = "translate( " + window.boxSettings.left + "px, " + window.boxSettings.top + "px )";
            box.style.transform = "translate( " + window.boxSettings.left + "px, " + window.boxSettings.top + "px )";
            
            window.boxSettings.moved = true;
        }
    }...