Transferring Variable Values Between Scopes

Question

I'm seriously sick and tired of thinking it. Okay there is a draggable blue box,; if it touches the red box, the redbox suddenly changes the position randomly. I mixed up whole codes, I know; I'm so dumb at this coding part. But I couldn't figure it the mistakes. I need someone who knowledge me about this situation.

The Jquery Part.

$(document).ready(function() {
var kol = 253;
var score = 0;
var redBoxWidth = $('#redBox').width();
var redBoxHeight = $('#redBox').height();
var redT = $('#redBox').position().top;
var redL = $('#redBox').position().left;
var redBox = $(".redBox");

var blueCoordinates = function(element1) {
    var top;
    var left;
    var blueBoxWidth = $('#blueBox').width();
    var blueBoxHeight = $('#blueBox').height();
    element1 = $(element1);
    top = element1.position().top;
    left = element1.position().left;

    $('#results').text('X: ' + left + ' ' + 'Y: ' + top);
    $('#results3').text('redL: ' + redL + 'redX: ' + redT);
    setTimeout(function() {
        if ((top > (redX) && left > (redY))) {
            setTimeout(function() {
                $('#results2').text(top + "  " + redX + "  " + redY + "  " + redBoxHeight + "   " + redBoxWidth);
            });
            redX = (Math.random() * ($('#canvas').width() - redBoxWidth)).toFixed();
            redY = (Math.random() * ($('#canvas').height() - redBoxHeight)).toFixed();
            redBox.css({
                'position': 'absolute',
                'left': redX + 'px',
                'top': redY + 'px'

            });


        }
        blueCoordinates();
    });
}

$('#blueBox').draggable({
    drag: function() {
        blueCoordinates('#blueBox');
    }
});

});

The HTML PART

<div id="canvas">
<div id="blueBox"></div>
<div id="redBox" class="redBox"></div>
</div>
<div id="results" class="results"></div>
<div id="results1" class="results"></div>
<div id="results2" class="results"></div>
<div id="results3" class="results"></div>

CSS PART

#
canvas {
width: 500px;
height: 400px;
background: #ccc;
position: absolute;
top: 0px;
left: 0px;
}#
blueBox {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: blue;
cursor: move;
}
.redBox {
position: absolute;
top: 250px;
left: 350px;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
.results {

text - align: center;
position: relative;
top: 400px;
left: 25px;
}

Answer 1

Only thing that I needed was transferring the values of redX and redY to redT and redL...

 if ((top > (redX) && left > (redY))) {
        setTimeout(function() {
            $('#results2').text(top + "  " + redX + "  " + redY + "  " + redBoxHeight + "   " + redBoxWidth);
        });
        redX = (Math.random() * ($('#canvas').width() - redBoxWidth)).toFixed();
        redY = (Math.random() * ($('#canvas').height() - redBoxHeight)).toFixed();
      redT=redY;
      redL=redX;
        redBox.css({
            'position': 'absolute',
            'left': redX + 'px',
            'top': redY + 'px'

        });