2

私のアプリケーションは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の例です。g6の正方形に触れるだけで、黒い王をg5に移動してみることができます。王はg6に配置されます。

この厄介な問題をどのように修正できますか？

4

1 に答える 1

1

次のCSSスニペットを追加することで、動作を修正できました。

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

誤った動作を観察すると、クローン画像は幅と高さがゼロであるかのように動作しているように見えました。つまり、絶対位置の画像の左上隅が、画像の寸法を無視して、DROPの宛先を示していました。

だから、私の最初の試みは、この「欠けている」幅/高さを「提供」することでした...そしてそれはうまくいきました。

今、この便利な「発見」の助けを借りて、あなたはあなたのニーズと要件に基づいて、より適切な解決策を練り上げることができます...

于 2012-09-17T15:13:48.603 に答える