在mouseup（）事件中使用mousedown（）中的变量

Question

So to those who looked at my previous question , im building a chess board in complete JS and jQuery (or mostly at least).

So for my pieces to effectivly be restricted in the amount of squares they are allowed to move i need to know their position. (starting and ending position)

I wrote the code below to log the starting row (integer) and starting column (integer) and do that on both mousedown() and mouseup()

var piece;
        $('div').mousedown(function(e) {
            e.preventDefault();
            var selectedRow = this.getAttribute("data-row");
            var selectedColumn = this.getAttribute("data-column");
            console.log(selectedRow, selectedColumn);
            piece = $(this).find('.pawn');
        })
        .mouseup(function() {
            var selectedRow = this.getAttribute("data-row");
            var selectedColumn = this.getAttribute("data-column");
            console.log(selectedRow, selectedColumn);
            if (selectedRow === selectedRow++ || selectedColumn === selectedColumn++){
                console.log('TRUE :D'); //Wont be true because both selectedRow's will be the same value
            }
            $(this).append(piece);
        });

For as far as i can see i cant compare both values since both logs are in different events. (please keep in mind that im new to both languages and im still learning).

My question would be if its possible to collect both values (starting and ending) and then being able to compare them to each other.

Answer 1

The easiest approach is to make a selectedRow_down and selectedColumn_down selectedRow_up and selectedColumn_up in global scope.

var selectedRow_down;
var selectedColumn_down;
var selectedRow_up;
var selectedColumn_up;

$('div').mousedown(function(e) {
    e.preventDefault();
    var selectedRow_down = this.getAttribute("data-row");
    var selectedColumn_down = this.getAttribute("data-column");
    piece = $(this).find('.pawn');
})
.mouseup(function() {
    var selectedRow_up = this.getAttribute("data-row");
    var selectedColumn_up = this.getAttribute("data-column");
    console.log(selectedRow_up, selectedColumn_up);
    $(this).append(piece);
});

then refer to its value as you do your mouse event

also you could make global 2 dimensional array first so could keep track of your chess pieces, see this thread how to create 2d arrays How can I create a two dimensional array in JavaScript?