Question

I am creating a checker variation game.
I am new to jquery but through some help the pieces can now move around the board.

Is there a way to indicate the start location and end location of a move?

I would also like to disable all piece movement once a move has been made.

current code:

$('img').draggable();
$('#tbl td').droppable({
hoverClass: 'over',
drop: function(event, ui) {
    var cell = ui.draggable.appendTo($(this)).css({
        'left': '0',
        'top': '0'
    });
    var row = cell.closest('tr').prevAll().length + 1;
    var col = cell.closest('td').prevAll().length + 1;
    $('#coords').html('Row ' + row + ', Col ' + col);
  }
});

jsfiddle http://jsfiddle.net/blueberrymuffin/bLb3H/

thanks.

Answer 1

$('img').draggable({
    start: function(e, ui) {
        alert('Starting move from position (' + ui.position.top + ', ' + ui.position.left + ')');
    },
    stop: function(e, ui) {
        alert('Ending move at position (' + ui.position.top + ', ' + ui.position.left + ')');
    }
});
$('#tbl td').droppable({
    hoverClass: 'over',
    drop: function(event, ui) {
        var cell = ui.draggable.appendTo($(this)).css({
            'left': '0',
            'top': '0'
        });
        var row = cell.closest('tr').prevAll().length + 1;
        var col = cell.closest('td').prevAll().length + 1;
        $('#coords').html('Row ' + row + ', Col ' + col);
        $('img').draggable('disable');
    }
});​