移動棋子的位置

Question

我正在創建棋子變體遊戲。 我是jquery的新手，但通過一些幫助，現在棋子可以在棋盤上移動。

有沒有辦法指出移動的開始位置和結束位置？

我還想在移動完成後禁用所有塊運動。

當前代碼：

$('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/

感謝。

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'); 
    } 
});​ 

Answer 2

我想我想通了。 下面是代碼：

$('img').draggable({ 
start: function(e, ui) {   
var myCol = $(this).closest("td").index() + 1; 
var myRow = $(this).closest("tr").index() + 1; 
$('#coords').html('Row ' + myRow + ', Col ' + myCol);    
}, 
}); 
$('#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'); 
} 
}); 

和的jsfiddle：http://jsfiddle.net/bLb3H/5/

我不知道，雖然如何與被拖到它的新的替換當前圖像（目前兩個圖像佔用相同的細胞）。有任何想法嗎？

謝謝。