問題タブ [jquery-droppable]

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

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

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

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

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

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

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

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

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

私のユーザーインターフェイスには、多くのポップアップダイアログがあり、そのうちのいくつかにはjqueryのドロップ可能なターゲットが含まれています。正常に動作しますが、1つのポップアップがドロップターゲットを完全にカバーしている場合は、イベントの伝播を停止したいと思います。

ポップアップダイアログにイベントハンドラーを配置して、ドロップイベントの伝播を停止しようとしましたが、機能しませんでした。

オブジェクトとターゲットは多かれ少なかれ同一であるため、スコープと受け入れオプションを使用することは実際には実行可能ではないようです。

何か案は？

jQueryUI とドラッグ/ドロップ可能なオプションに問題があります。

私が達成したいのはこれです：

1) 要素を別の要素にドラッグします 2) 要素がそこにあると、ドラッグ可能な要素を初期状態に戻します (そして他のことを行います)

これを行うことで、オブジェクトを初期状態に戻すことができます。

しかし、要素を正しい場所にドラッグしても元に戻したい...

編集

私はこれを試しました：

しかし、機能していません...オプションを取得して実行しようとしましたが、機能していません。

一部の部分が重複する可能性のある複数の jquery ドロップ可能オブジェクトを隣り合わせに作成しようとしています。これらの場合、一番上にあるもの (z インデックスに関して) を貪欲にする必要があります。

ドロップ可能でオプションを設定しようとしgreedy: trueましたが、これは役に立たないようです。return falseまた、ドロップイベントで試して使用しevent.stopPropagation();ました。

これは、 jquery のデモ ページに基づくjsfiddleです。

それをトリガーする別のドロップ可能なもの、できれば最高のz-indexを持つものがある場合、ドロップイベントの伝播を停止する方法はありますか?

私は認めざるを得ません、私はほとんど初心者ですが、私はこれに苦労しています. if両方のドロップが発生した後にトリガーする必要がありますが、現在はロード時にトリガーされます。私はそこに何が欠けていますか？

オブジェクトをある div から別の div にドラッグ アンド ドロップすると、li の形式はテキストのみに変更されます。ドロップした後、同じ形式とスタイル、つまり「li」でそれが必要です。

サンプルコードはこちら

JQuery - Draggable/Droppable に問題があります。私はグーグルで検索しており、このフォーラムも検索しました。問題はある程度解決されましたが、まだ望ましくない結果につながる状況があります。

このスレッドでいくつかの回答を進めました: jQuery UI - Droppable only accept one draggable。

したがって、私の使命は基本的に、1 つのドラッグ可能なアイテムだけがドロップ可能なアイテムに着陸できるドラッグ アンド ドロップ システムを持つことです。まず、Draggables が既に配置されている場合は、それらの Droppables がビジーであることを設定する必要があります。そのために create 関数を使用しました。

ここにいくつかのコードがあります：

私の問題: ユーザーがアイテムをドラッグして、受け入れ可能な Droppable に配置できなかった場合、元に戻ります。これは、ドロップされておらず、drop: 関数が実行されないことを意味します。つまり、この Droppable は、ドラッグ可能なクラスの各アイテム (元に戻されたアイテム) があっても受け入れるようになりました。これについて何ができますか？ここで私が言いたいことを理解していただければ幸いです。

私は今すべてをやったといいのですが、そうでない場合はお知らせください.

ありがとう！

jQuery UI はまだ Meteor の「パッケージ」ではありません。最終的にパッケージになったとしても、新しい jQuery と jQuery UI バージョン、および Meteor で使用したい他の jQuery プラグインが存在するでしょう。さまざまな問題が発生します。

1. タグ経由でロードする<script>か、js ファイルをクライアントまたはルート ディレクトリに配置しますか?
2. CDN からスクリプトを取得する場合に問題はありますか? ローカルに保存する方が良いですか (「public」ディレクトリなど)?
3. テンプレートがレンダリングされる前に呼び出される可能性があるため$(document).ready()、通常は .ready() から呼び出されるさまざまなセットアップ関数を呼び出すのに最適な場所はどこですか? Templates.<Name>.renderedテンプレートのレンダリング中に DOM が変更された場合に、さまざまなイベント ハンドラーが新しい DOM ノードに再アタッチされるように、それらを で呼び出す必要がありますか? これにより、DOM から削除されたファントム ノードを処理するためにまだ存在する古いハンドラーのメモリ リークが発生しますか?
4. jQuery UI ウィジェットからのイベント コールバックに基づいてモデル データを変更しようとしている場合 (およびイベントが "click" や "dblclick" などの Meteor テンプレート イベントによってネイティブにサポートされていない場合)、コールバック中に、問題のウィジェットに関連付けられたコレクション データ? Template..rendered 中にオブジェクトの _id を DOM にロードし、関連する jQuery UI イベント ハンドラー中に読み戻す必要がありますか? 他の方法はありますか？

この質問によると、問題は 0.5.0 以降変更されていることに注意してください。そのため、いくつかの既存の同様の StackOverflow の質問は古くなっている可能性があります (また、また、また)。

例があなたの答えに役立つなら、ここに jQuery Draggable and Droppable を統合する作業中の (?) Meteor プロジェクトがあります: http://products-jqueryui.meteor.com/ with Source Here に基づいてTutorial Here

(私の質問で「安全に」とは、Meteor フレームワークで破壊的なエラーを引き起こさない (または Meteor が jQuery/jQuery UI を混乱させる) ことを意味し、可能な限り効率的に: 過剰な DOM 操作/レンダリングを回避することを意味します。過剰なクライアント/サーバー トラフィック、またはメモリ リークの原因となります)。

そのため、ヘッダーにあるように、私の Javascript は公開時に動作を停止します (これはサーバー上にあります)。(これは Draggable/Droppable に関するものであり、Droppable には 1 つの Draggable のみを含める必要があります)。

これは私のJavascriptコードです:

さて、私はこの記事の解決策のいくつかを使用しました: jQuery UI - Droppable only accept one draggable 公開されたバージョンでこれを実行すると、JQuery がまったく機能せず、オブジェクトをドラッグできません。

私が行ったテスト - スクリプトからこのコードを取り出しました:

したがって、少なくとも公開されたバージョンではドラッグ/ドロップが機能しますが、それでも最大 1 つの機能が必要です。

私のJavascriptファイルは次のように参照されています：

私のスクリプト ファイルは、ローカルとサーバーの両方のフォルダーにあります。

したがって、私の疑いは「jQuery 1.6」に当てはまります。これについて何か知っている人はいますか？

テキストの壁で申し訳ありません。事前に感謝します

/リッカード

Draggable 停止イベントが実行されているときにドロップ可能なコントロールを見つける必要があり、ID を取得しました。これは可能ですか？つまり、基本的に私の考えは次のとおりです。「out」関数が実行されているときは、dropId を保存します。次に、アイテムが元に戻される場合、元に戻された Draggable のみを受け入れるように古い Droppable を設定する必要があります。

これは私のコードの一部です:

私の itemDrop 関数は基本的にデータベースを更新し、これを設定します: $(this).droppable('option', 'accept', ui.draggable);

これは、アイテムが元に戻されるときに私が求めているものです。

私はやや明確であることを願っています！そうでない場合は、お知らせください。

ありがとう！