javascript - 移动件的位置

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/

我不知道如何用拖到它上面的新图像替换当前图像（当前两个图像占据同一个单元格）。有任何想法吗？

谢谢。