移动棋子的位置

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/

我不知道，虽然如何与被拖到它的新的替换当前图像（目前两个图像占用相同的细胞）。有任何想法吗？

谢谢。