0

自分では解決できない小さな問題があります。このフィドルを見てください: JSfiddle

これは私が抱えている問題の基本的な例です。ドロップ可能な領域である大きな div があります。このドロップ可能エリア内には、他の複数のドロップ可能エリアがあります。

要素がドロップされると、内側のドロップ可能領域はそのコードを通過する必要があります。代わりに、外側の div のコードが実行されるようです。私は何か間違ったことをしていますか？div の周りの領域は、要素をここに配置できるため (正式には削除されません)、このままにしておく必要があります。

私の質問が十分に明確であることを願っていますが、フィドラーがそれ自体を物語っていると思います。

PS - この例のサイズ変更は機能していませんが、私の開発環境では機能しています。

Rusty さんと Mark さん、返信ありがとうございます。

わかりにくいサイズ変更で申し訳ありません。コードからそれを削除しただけです。 新しいフィドラー

物事を明確にするためだけに。ボックス div は、複数の画像を含むコンテナです。私は次のことを達成しようとしています: http://postimage.org/image/qwhtik04f/ 灰色の点線のボックスは、私の例の dropbox2 div です。これらのドロップ ボックスの周りのスペースは、dropbox div です。

ボードのあるスペースは、何も起こらずに画像をドロップできる唯一の場所です。ドラッグされた画像は、dropbox2 div にスナップバックできます。画像をドロップボックス div にドラッグすると、画像が元に戻ります。

4

2 に答える 2

2

内側のドロップ可能オブジェクトにオプションを設定するgreedy: trueと、外側のドロップ可能オブジェクトでイベントが発生しなくなります。

jQuery('#dropbox2').droppable({
    greedy: true,
    drop: function(event, ui) {
        // ...
    }
});
于 2012-06-29T15:16:31.877 に答える
0

あなたのコードは、アウター用にこれを持っています<div>:

$("#dropbox").droppable({
    drop: function(event, ui) {
       ui.draggable.draggable( 'option', 'revert', true );
    }
});

これは、アウターにドラッグするときにrevertオプションを設定することを示しています。ただし、小さい をドロップしても、オプションは に設定されたままです。inner へのドロップが成功した後、ドラッグ可能な要素の値を変更するだけです。true<div><div>truerevert<div>

$("#dropbox2").droppable({
    drop: function(event, ui) {
        ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
        // Add this line
        ui.draggable.draggable( 'option', 'revert', false );
    }
});

アップデート：

Mark は、私の解決策が親コンテナへのイベントの伝播を止めないことを指摘しました。greedy: true彼の答えが示すように、最初のオプションを追加する必要があります。jQueryのドキュメントには次のように書かれています：

true の場合、ネストされたドロップ可能オブジェクトでのイベントの伝播を防ぎます。

それはあなたが探しているもののように聞こえます。はドロッパブルにのみ設定され、ドラッグ可能な反応には影響しないため、ドラッグ可能なrevertプロパティを変更する必要があります。greedy

于 2012-06-29T14:42:43.347 に答える