3

DataTables と JQuery UI Droppable を組み合わせようとしています。

dataTable をドラッグすると、オーバーレイがテーブルの領域に重なるようにします。これは実際にはうまく機能します。#tableそれぞれのコードについて、dataTables と JQuery UI リファレンスの両方があります。

ただし、ドラッグ イベント ( over、drop) はテーブルの半分でしか発生しません。（左側。）

これが私のライブの例です。リスト項目の 1 つを表の上にドラッグしてください。

Chrome27を使用しています。

デュアル モニターをセットアップしており、この例で他のモニターにドラッグすると (全画面表示であると仮定)、ドラッグ イベントは実際には左側のウィンドウの外側で発生します。

視覚的な例を次に示します。

ここに画像の説明を入力

何が原因なのだろうか？コンソールでテーブルを調べると、あるべき場所にあることが示され、テーブルの途中で重なっているものは何もありません。

これは、DataTables と Droppable が正しく連携していないことの副作用ですか? 私はそれを理解することはできません。多分それは単なるCSSの問題ですか？

JQuery UI Positioning をいじってコンソールで調査しようとしましたが、成功しませんでした。私の疑いは、それはドロップ可能であり、テーブルの位置が正しくないことに関係しているということです（視覚的にわかるように、位置は正しくなっていますが）。

誰にもアイデアはありますか？

4

2 に答える 2

4

問題は、ドロップ可能な許容オプションによって引き起こされているようです。デフォルトは ですintersect。

APIドキュメントに記載されているように

intersect: ドラッグ可能はドロップ可能と両方向で少なくとも 50% オーバーラップします。

あなた<li>の s がまだデフォルトのスタイルにあることを見て、それらは親の利用可能な幅を埋めます<ul>.テーブルの右側にそれらをドラッグしようとすると、 の 50% 以上が<li>ドロップ可能の外にぶら下がっています.

にいくつかの境界線を追加すると<li>、#myListOfData何が起こっているのかをよりよく把握できます。

図1

問題が何であるかがわかったので、解決策に進みます。

ペッパーが言ったように、ドロップ可能の許容オプションをポインターに変更するだけです：

実施例1

    $('#table').droppable({
        tolerance: 'pointer', //Important Bit
        over: function (event, ui) {
            $('#tableOverlay').width($(this).width());
            $('#tableOverlay').height($(this).height());

            $('#tableOverlay').show();
            $("#tableOverlay").position({
                of: this,
                at: "top left",
                my: "top left"
            });
        },
        out: function (event, ui) {
            $('#tableOverlay').hide();
        },
        drop: function (event, ui) {
            $('#tableOverlay').hide();
        }
    });

tolerance option: 'touch'または、次のように使用できます。

実施例2

    $('#table').droppable({
        tolerance: 'touch', //Important Bit
        over: function (event, ui) {
            $('#tableOverlay').width($(this).width());
            $('#tableOverlay').height($(this).height());

            $('#tableOverlay').show();
            $("#tableOverlay").position({
                of: this,
                at: "top left",
                my: "top left"
            });
        },
        out: function (event, ui) {
            $('#tableOverlay').hide();
        },
        drop: function (event, ui) {
            $('#tableOverlay').hide();
        }
    });

<li>または、次のように s の幅を指定できます。

実施例3

#myListOfData li {
    width: 100px;
}

または、許容範囲オプションを変更したり、幅を指定したくない場合は、
display: table;次のように使用できます。

実施例4

#myListOfData li {
    display: table;
}
于 2013-08-24T17:17:11.753 に答える
1

追加するtolerance: "pointer"と、期待どおりに機能しました。

于 2013-08-24T00:44:02.797 に答える