player move

by ostapische

HTML

<div id="playerHolder"></div>

CSS

div#playerHolder {
    display: block;
    position: absolute;
    left: 100px;
    top: 200px;
    width: 300px !important;
    height: 100px !important;
    background-color: green;
    cursor: pointer;
}

JavaScript

var playerSettings = {
    onMove: false,
    position: {
        left: null,
        top: null
    },
    mousePos: {
        x: null,
        y: null
    }
};
window.addEventListener( "load", function( windowLoadE ) {
    // console.log( this, windowLoadE );
    var playerHolder = document.getElementById( "playerHolder" );
    // console.log( playerHolder );
    playerHolder.addEventListener( "mousedown", function( playerHolderMouseDownE ) {
        playerSettings.onMove = true;
        playerSettings.position.left = parseInt( this.offsetLeft );
        playerSettings.position.top = parseInt( this.offsetTop );
        playerSettings.mousePos.x = playerHolderMouseDownE.pageX;
        playerSettings.mousePos.y = playerHolderMouseDownE.pageY;
        // console.log( this, playerHolderMouseDownE, playerSettings );
    } );
    window.addEventListener( "mousemove", function( windowMouseMoveE ) {
        // console.log( this, windowMouseMoveE );
        if ( playerSettings.onMove ) {
            var playerHolder = document.getElementById( "playerHolder" );
            playerSettings.position.left += windowMouseMoveE.pageX - playerSettings.mousePos.x;
            if ( playerSettings.position.left < 0 ) {
                playerSettings.position.left = 0;
            } else if ( playerSettings.position.left + playerHolder.offsetWidth > window.innerWidth ) {
                playerSettings.position.left = window.innerWidth - playerHolder.offsetWidth;
            }
            playerSettings.position.top += windowMouseMoveE.pageY - playerSettings.mousePos.y;
            if ( playerSettings.position.top < 0 ) {
                playerSettings.position.top = 0;
            } else if ( playerSettings.position.top + playerHolder.offsetHeight > window.innerHeight ) {
                playerSettings.position.top = window.innerHeight - playerHolder.offsetHeight;
            }
            playerSettings.mousePos.x = windowMouseMoveE.pageX;
            playerSettings.mousePos.y =...