0

私は長い間この仕事を手に入れようとしてきましたが、運がなかったので、ここで尋ねることにしました.

jquery ui ライブラリを使用してドラッグ アンド ドロップ div を作成しています。

現在、ページに動的に追加するクラス「親」を持つ多くの div があります。 

$( ".parent" ).droppable({
        accept: ".child",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
    tolerance:'touch',
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" ).appendTo(ui.Target);
        }
    });

次に、クラス 'child' を使用してその場で div を作成し、子 div を任意の親 div にドラッグ アンド ドロップできます。親のドロップ可能アイテムについては、許容範囲が「タッチ」に設定されていることに注意してください。

$( ".child" ).draggable();

親 div は、子 div よりもサイズが小さいです。子 div をドラッグして 2 つの親 div の上に移動する場合 (この時点では、子 div をドロップしていないことに注意してください)、理想的には、子 div を最初の親 div にのみドロップする必要があります。

子 div が最初の親 div に追加されます。次に、最初の親 div から 2 番目の親 div に移動されます。

子 div をドラッグ可能なままにして、最初の親 div にのみドロップできるようにする方法はありますか?

読んでくれてありがとう。

明確でない場合はお知らせください。言い換えます

子を親 2 と 3 の上にドラッグすると、同じ動作が示されます: http://jsfiddle.net/Dyawa/3/

4

2 に答える 2

1

次のように設定されていることに注意してください。

tolerance:'touch'

しかし、これはまさにこれが意味することです - 「ドラッグ可能なものは、ドロップ可能なものにいくらでも重なります。」( http://api.jqueryui.com/droppable/#option-toleranceから)

これをチェックしてください: http://jsfiddle.net/Dyawa/2/ - 許容範囲を削除するだけで違いがわかります。

使用することをお勧めします:

tolerance: 'pointer'
于 2012-12-04T00:48:21.687 に答える
0

コード全体が表示されないため、推測するのは少し難しいですが、以下を試してください。

$( ".parent" ).droppable({
        accept: ".child",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
    tolerance:'touch',
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" ).appendTo(ui.Target);
                     event.preventDefault(); // or `return false;` 
        }
    });
于 2012-12-04T00:09:35.053 に答える