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/

我不确定如何用拖动到它上面的新图像替换当前图像（目前两个图像占据同一个单元格）。有什么想法吗？

感谢。

移动件的位置

2 个答案: