2

我的应用程序在 FF 和 IE 中运行良好，但在 Chrome 中却以一种意想不到的方式运行。我正在使用 jquery 在棋盘上实现棋子的拖放行为。我发现使用 helper: "clone" 选项会触发 Chrome 中的错误行为。正确的行为是：棋子必须落在与其重叠至少 50% 的正方形上（默认相交容差）。Chrome 的行为是：棋子落在它接触的上方方块上。

$(".piece-draggable").draggable({
    revert: true,
    // with "helper" option set to "clone" the drop is incorrect: moving only the 
    // top of the king piece to g5 
    // it happens the king is misplaced to g6 (onDrop is called from g6).
    // This behaviour affects only Chrome while FF works as expected.
    // without using the helper, all browsers works fine    
    helper: "clone",
    containment: ".board",
    start: onDragStart,
    stop: onDragStop
});

$(".square20").droppable({
    drop: onDrop
});

function onDragStart(event, ui) {
    $("#text").append("<p>start</p>");
    $(this).css("opacity", "0.35");
    $(ui.helper).css("opacity", "1");
}

function onDragStop(event, ui) {
    $(this).css("opacity", "1");
    $("#text").append("<p>stop</p>");
}

function onDrop(event, ui) {
    //ui.draggable.draggable('disable');
    //$(this).droppable('disable');
    ui.draggable.position({
        of: $(this),
        my: 'center',
        at: 'center'
    });


    ui.draggable.draggable('option', 'revert', false);
    $("#text").append("<p>" + "drop " + $(this).attr("id") + "</p>");
}


$(".piece-draggable").draggable('enable');

$(".square20").droppable('enable');​

这是jsfiddle示例。您可以尝试将黑王移动到 g5，只需触摸 g6 方格：黑王将被放置在 g6 上！

我该如何解决这个讨厌的问题？

4

1 回答 1

1

我能够通过添加以下 CSS 片段来修复该行为：

img.piece-draggable {
    width: 20px;
    height: 20px;
}

通过观察不正确的行为，在我看来，克隆图像的行为就好像它的宽度和高度为零，即绝对定位图像的左上角决定了 DROP 目标，而忽略了图像尺寸。

所以，我的第一次尝试是“提供”这个“缺失”的宽度/高度……它奏效了。

现在，借助这个有用的“发现”，您可以根据自己的需要和要求制定更合适的解决方案......

于 2012-09-17T15:13:48.603 回答