問題タブ [jquery-draggable]

私はjquery uiをドラッグ可能に使用しており、最終的にはドロップ可能にして、写真を別のボックスに並べ替えることができます。

画像をボックスからドラッグすると、直接のコンテナーを離れると、他のすべての要素の下に表示されます。

グーグル中に、追加できることがわかりました：

これにより、ドラッグされているものがすべての要素の上に表示されますが、元のコピーがボックス内に残ったままになり、それは望ましくありません。

ドラッグされたときに要素をすべての上に置く方法はありますか? 高い z-index を試してみましたが、役に立ちませんでした。

これは、最初のドラッグ要素が 2 番目のドラッグ要素の後ろにあることを示す jsfiddle です。それは逆の問題ではありません。他の多くのものを壊すことなく、含まれているdivの相対的な位置を変更することはできません.

http://jsfiddle.net/cBWhX/6/

このプラグインを Angular で使用しています。ドキュメントには、

ドラッグ可能なオブジェクトが呼び出される onDrop コールバック メソッドは、ドロップ可能なオブジェクトにドロップされます

だから私はこのようにそれを使ってみました（関連する部分はonDrop="myCallback" です）：

そして、スコープで関数を次のように定義しました。

http://plnkr.co/edit/kiYrIU?p=preview

プランカーからわかるように、何らかの理由でコールバック関数が見つからないため、これは機能しません (おそらくスコープを見ていませんか?)。

onDrop="myCallback(event, ui)"など、これの複数のバリエーションを試しましたが、onDrop="myCallback"どれも機能しませんでした。

これはバグですか、それとも正しく使用していないだけですか?

前もって感謝します。

私は JavaScript と JQuery にまったく慣れていないので、私の問題を解決してくれることを願っています。

いくつかの小さな tr に div をドロップし、div でカバーされる最高のものを取得したいと考えています。しかし、JQuery は div の中心にある tr を選択しているようです。

divの高さを使用してトップtrを計算せずにこれを実現する簡単な方法はありますか?

たぶん、私は何か間違ったことをしている、または何かを見逃しているだけです。

HTML:

JQuery:

jsfiddleとして

前もって感謝します！

ドラッグ可能な複数のアイテムを1つのドロップ可能なアイテムにのみドラッグできるようにしようとしています。ドロップ可能の外にドロップされた場合は元に戻します。私のコードのほとんどは、1 つのバグを除いて機能します。

ユーザーが項目をドロップ可能にドラッグします。次に、ドラッグアウト (関数を実行) し、ドロップ可能にドロップできません (元に戻すと、ドラッグは以前のドロップ可能に戻ります)。効果的に起こったのは、ドロップ可能オブジェクトがドラッグを受け入れることができるようになったことです (ドラッグが実行されてから)、元に戻すためにドラッグが実際に離れることはありません。

私はこれを数時間解決しようとしており、API を使用しました。元に戻すためのコールバック関数を用意しようとしましたが、ドラッグ可能のドロップ可能を取得する方法が混乱しているため、行き詰まりました。

jsFiddle: http://jsfiddle.net/tG6cj/

私はjQuery初心者ですがlightbox、ページに多数の画像が存在する可能性がある場所をシミュレートしようとしており、ユーザーが画像をドロップゾーンにドラッグアンドドロップしてから追加できる「フローティング」ドロップゾーンを持っていますライトボックス。

ライトボックスは、2 つの行と 4 つのセルを含むテーブルで構成され、各セル内にドロップゾーンである div があります。

テーブル/セルを使用して画像の順序を調整するつもりでした (画像は (特に) AJAX 経由でサーバーに保存されます)。

私は実際にスナップを介して画像を中央に配置しましたが、div静的に配置する必要があります。おそらくこれには別の解決策がありますが、いずれの場合も、位置/静的をドラッグ可能に追加することを省略すると、コンテナdivまたはテーブルセル内に配置されません:

ドロップゾーンにドラッグされた画像は新しいドロップゾーンにドラッグできますが、2 回目のドラッグで画像が表示されないかdiv、正しくドロップされます。"を削除する"$(this).append(ui.draggable.css('position', 'static'))と、2 番目のドラッグは正しく機能しますが、ドロップボックスには含まれません。

これがフィドルです：フィドル

次の機能を持つページを開発しようとしています。

ページには 2 つの列があります。1 つは #origin (左の列) で、四角形 (変数を表す) のリストを含み、2 つ目は #drop (右の列) で、四角形をドロップできる入力を含みます。

必要な結果を得るために、 jquery ui draggableとjQuery Tokeninputの 2 つのプラグインを使用することを考えました。

<li>問題は、rectangle( ) を入力フィールドにドロップすると、タグとして表示されるようにするにはどうすればよいかということです。同じ要素を使用しても問題ありません。<li>ただし、(式を完成させるために) 入力にさらにテキストを入力できる限り、後でユーザーが気が変わって、変数 (タグ) が自分のものではないと判断した場合または、彼女が望むように、ページでタグを削除できるようにする必要があります (右上隅の「X」をクリックするか、左側の列の元の場所にタグを戻すことによって)。

誰かがすでに似たようなことをしていて、私にいくつかのガイダンスを与えることができますか?? または、誰かがこれについて別のアイデアを持っていますか?

どんな助けでも大歓迎です。

PS同じ入力でテキストとタグを組み合わせることができる他のタグ付けプラグインを知っている場合は、私に知らせてください.

バックグラウンド

対応する div のオブジェクトの位置とサイズを保存する流星アプリケーションを構築しています。このページに再度アクセスすると、すべての div が再作成され、オブジェクトのサイズと位置が適切に再設定されます。div と対応するオブジェクトを再設定してから、Template.[name].rendered 内で jQuery $().draggable() を呼び出しています。

問題

最初の Div でオブジェクトをドラッグしようとすると、位置 (左、上) の値が負の値になります。DOM に追加した最初の Div のオブジェクトにのみ発生します。ドラッグ可能の包含パラメーターを削除すると、負の位置は取得されなくなりますが、包含されなくなります。

この奇妙な行動に対処する方法を教えてください。ありがとう

上下に 2 つのドロップ ゾーンがあり、高さがドロップ ゾーンの高さとそれらの間の間隔の合計に等しいドラッグ可能な要素があるとします。要素を両方のゾーンにドラッグしてマウスを離すと、要素は上部のドロップ ゾーンではなく下部のドロップ ゾーンに追加されます。私がする必要があるのは、要素を両方のゾーンに配置する場合、要素を2番目のゾーンではなく最初のゾーンにドロップすることです。

これは私がこれまでに試したことです。

フィドル

そしてこれがスクリプトです

誰か助けてくれませんか。

編集: このような複数のドロップゾーンが隣り合わせに積み重ねられている場合があります。3x3 グリッドのように。いずれの場合も、ドロップを受け入れるのは上部のドロップゾーンであり、下部のドロップゾーンではありません。たとえば、列 1 => 行 1 と行 2 にカーソルを合わせると、col1 行 1 がドロップゾーンになります。列 1 => 行 2 および行 3 にカーソルを合わせると、 col1 row2 がドロップゾーンになります。

これは、私たちが開発しようとしているゲーム用です。ドラッグ アンド ドロップは、質問に投稿した方法で機能するはずです。