問題タブ [jquery-draggable]

私はjqueryUIとjQueryを使用draggableしていますが、すべてのドラッグ可能オブジェクトはjqueryクローンヘルパーを使用し、ドラッグ可能オブジェクトをドロップ可能に追加します。

これが私のコードです

クローンの位置をとで設定して.css('top', ui.absolutePosition.top);いますcss('left', ui.absolutePosition.left);が、位置はBODYを基準にしています。

位置はドロップ可能に対して相対的ではないため、ドラッグ可能はランダムな場所にドロップされます。全体として、ドロップ可能とドラッグ可能な統合は緊密ではありません。スムーズにしたいです。

基本的なjQueryスクリプトを使用して（jQuery UIを使用せずに）ドラッグアンドドロップを実現することは可能ですか?

.draggable()Meteorサブスクリプションを介して入力されるjQueryUIを使用して、ドラッグ可能なDOMオブジェクトのグループを作成しようとしています。私が思いついたコードは次のようになります

これらは一部のMeteor.publish()呼び出しに対応しているため、コレクションが変更されるたびに.draggable()動作がアタッチされます。少なくとも、それが私の意図でした。

ただし、これは1回だけ機能します。これら<li>のいずれかをドラッグアンドドロップすると、ドラッグできなくなります。

Templateオブジェクトがドロップされると、そのようなアイテムのに添付されているカスタムイベントを発生させます。

したがって、私の考えでは、ドロップ時のコレクションへのこの変更は、pub / subプロセスを介して伝播し、上記の行を再実行する必要.draggable()があります。しかし、そうではないようです。

このための完全なコードはhttps://github.com/sbeam/in-out/blob/master/client/inout.jsで確認でき、アプリはhttp://inout.meteor.com/で公開されています（アイテムがランダムに値を失ったり、UIから完全に消えたりする、他のおそらく無関係な問題です）

したがって、Meteorでのpub / subの動作についての私の理解がずれている場合は、知っておくとよいでしょう。または、それなしで機能するこのUI動作バインディングを実現するためのより効率的な方法はありますか？

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

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);

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

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

ありがとう！

ユーザーが何かをドラッグし始めたら、いくつかのcssを変更しようとしていますが、これを行う簡単な方法が見つかりませんでした。

現在、mousedownとmouseonを使用している場合、唯一の問題は、mousedownがclick（）とまったく同じように動作することですが、ユーザーが要素をドラッグするとすぐにクリックされるのではなく、要素をドラッグすると実行される関数のようになります。

これを行う簡単な方法があるはずですが、私は何も見つけていません。このための特別なjqueryイベントはありますか？

どうすればこれを行うことができるので、すべてのブラウザで機能しますか？

ここに私のアプリケーション：

http://jsbin.com/ucopun/97/edit

関連コード：

次のCanvasModelのビューがあり、ユーザーはツールバーからさまざまなウィジェットをドラッグアンドドロップできます。CanvasViewに何かがドロップされるたびに、新しいWidgetViewインスタンスがDOMに追加されます。

最近追加されたウィジェットもドラッグ可能で、ユーザーはキャンバス内の好きな場所にウィジェットを配置できます。問題は、最近追加されたWidgetがドロップされるとすぐに、別のWidgetViewインスタンスが追加されることです。

ツールバーからキャンバスにドラッグされたウィジェットのみをインスタンス化したい（それらには「ドラッグされた」クラスがあります）。ドロップリスナーを「フィルタリング」する方法はありますか？CanvasViewは、ドロップされたアイテムに「ドラッグ」のクラスがあるか、ツールバーからドラッグされた場合にのみウィジェットをインスタンス化しますか？

ドラッグ可能なアイテム（#draggable li）がいくつかあり、それらをsortable（#sortable）にドラッグアンドドロップしています。

ソート可能ファイルは2つのdivでラップされ、最も外側のdivにはoverflow-y：scrollがあります。ドラッグアンドドロップのメカニズムは、並べ替え可能なリストが展開およびスクロールされるまで正常に機能します。

アイテムをソート可能オブジェクトにドラッグして直接ドロップしようとすると、ソート可能なスクロールバーを希望どおりに自動スクロールできません（たとえば、上に移動して最初の要素の上にドロップするか、下に移動して下にドロップします）。最後の要素）。しかし、アイテムをドラッグして並べ替えようとすると、ドラッグ中にスクロールバーが自動スクロールします。

それはバグですか、それとも私のコードの動作に問題がありますか。

完全なコードは次のとおりです。

// CSS

// JS

フィドルのデモhttp://jsfiddle.net/8KDJK/21/

どんな助けでも大歓迎です。ありがとう ：）