4

jQuery を使用したドラッグ アンド ドロップの使用例が 2 つあります。あるケース.droppableでは、ドロップが機能しますが、 divの上部を厳密にターゲットにした場合に限られます。

他のケースでは、決して機能しません。

ここで何が問題なのか本当にわかりません。どちらも問題なく動作するはずです。z-index も試してみましたが、何も解決しません。

4

2 に答える 2

3

したがって、この問題はプロパティの組み合わせによって引き起こされました。cursorAtつまり、ヘルパーをカーソルから別の場所に移動するために意図的にオフセットしたことと、交差に設定されているドロップ可能のデフォルト オプション「許容範囲」です。

許容範囲が Intersect に設定されている場合、ドラッグ可能なヘルパーがドロップ可能なコンテナーと少なくとも 50% 交差するまで待機します。また、ヘルパーをオフセットしていたため、正しくオーバーラップすることはめったにありませんでした。

ドロップ可能な許容範囲を「ポインター」に変更すると、ドラッグ可能なターゲットとしてポインターのみを受け入れるようになります。

var taskSelected = $("#tablecontainer tr.selected").length;

$("#tablecontainer tr.selected").draggable({
    cursor: "move",
    cursorAt: { top:-12, left: -20 },
    helper: function(event) {
        return $("<div class='ui-widget-header'>" + taskSelected  + " Tasks selected.</div>");
    }
});

$(".featureOrgDataWrapper .droppable").droppable({
    activeClass: "ui-state-highlight"
    , tolerance: "pointer"
    , drop: function (event, ui) {
        alert("success");
    }
});

作業バージョン: #1および#2

于 2012-10-18T23:26:38.140 に答える
0

私はこれが正しいかどうか確信が持てませんが...

clearfix最初の例にクラスを追加しましたが、うまくいくようです: http://jsfiddle.net/kboucher/4wBLG/

そして、2 番目の例がまったく機能しない理由は、droppableコンテナーが実際には青い四角の隣にあるためだと思います。(青い四角はドロップ可能な領域を表していると思いますか?)

于 2012-10-18T23:05:27.543 に答える