Question

我的应用程序在FF和IE中运行良好，但它在Chrome中以一种意想不到的方式运行。我正在使用jquery在棋盘上实现棋子的拖放行为。我发现使用帮助器：“克隆”选项会触发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上！

如何解决这个令人讨厌的问题？

Answer 1

我可以通过添加以下CSS代码段修复此行为：

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

通过观察不正确的行为，在我看来，克隆的图像就像是零宽度和零高度一样，即绝对定位图像的左上角指示DROP目的地，忽略图像尺寸。

所以，我的第一次尝试是“提供”这个“缺失”的宽度/高度......并且它起作用了。

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

当帮助程序设置为克隆时，jQuery ui拖放在Chrome中无法正常工作

1 个答案: