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

Question

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

$(".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方 block :王将被放置在g6上!

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

Answer 1

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

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

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

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

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