問題タブ [jquery-ui-draggable]

私は非常に新しくJQuery、Draggable プラグインを使用してサンプル ページを作成しようとしています。<div>ページは正常に読み込まれますが、タグをどこにもドラッグできません。私はこのデモをコピーしようとしてきました。これが私のコードです：

<div>「ドラッグ可能」を「デモ」の周りにドラッグできるようにしようとして<div>います。誰かが私が見逃しているものを見ることができますか?

テキスト領域にアイテムをドラッグアンドドロップするコードを開発しましたが、修正方法がわからない問題が発生しました。

まず、ドラッグで要素を取得するときは、多くのスペースを取ります。必要なのはテキストだけで、それ以上でもそれ以下でもありません。

次に、結果としてテキストをクリーンアップできず、常にデータを追加します。クリーンアップして、現在のオブジェクトのみを追加する必要があります。

第三に、テキストエリアにドロップされたときにテキストを太字にする方法はありますか？何か案は。ありがとう

私のコードを参照してください

解決策が見つかりました! 私はそれを見つけました、変数アイテムのIDを取得できることを見落としていました。だから私は入れvar item_id = item.attr('id');て、それが私の解決策でした。思ったよりずっとシンプル。助けてくれてありがとう！

さて、jQuery には複数のドラッグ可能な要素があります。それらはすべて画像ですが、それぞれに独自の ID があります。とにかく、画像がドロップ可能にドロップされると実行される機能を設定しました。データベースにドロップされた画像を処理できるように、画像のIDを取得できるようにしたいと考えています。

それが私のコードです。を見つける必要がありますitem_id。これは私の推測ですvar item_id = $('<img />').attr('id');が、空白の情報が返されました。私も試しvar item_id = ui.draggable.attr("id");てみましたが、残りの機能が停止しました。何か案は？前もって感謝します。

ちなみに、ドラッグ可能なアイテムは次のようになります。 <img src='http://motb.isgreat.org/objects/khhhqw4s.png' class='object foundation' id='khhhqw4s'/>

UPDATEvar item_id = ui.draggable.attr("id");上記の if ステートメント を移動したところ、 undefined. したがって、ここからどこに行けばよいかわかりませんが、AJAX 呼び出しがデータベースをundefined.

更新 - 再び

したがって、これが簡単になる場合に関数を呼び出す方法は次のとおりです。

私はこれまでにこのようなことをしたことがないので、本当に私を超えています. このページを直接見たい場合は、http: //motb.isgreat.org/ にアクセスしてログイン ボタンをクリックし、ユーザー名とパスワードの両方にtestbotを使用します。ドラッグ可能な場所を確認するには、左側にこの大きなボックスがあり、その下に 4 つの小さなボックスがあります。単語が基礎である小さなボックスの上をクリックします。表示されるオブジェクトを小さなボックスにドラッグしようとしています。私が伝えようとしている情報を含むアラートが表示されます。私のソースに問題がないか自由に確認してください。項目は私のデータベースから呼び出されるため、私の PHP はおそらくあなたのソースから欠落しています。

私はそれを見つけました、変数アイテムのIDを取得できることを見落としていました。だから私は var を置きitem_id = item.attr('id');、それが私の解決策でした。思ったよりずっとシンプル。助けてくれてありがとう！

私はjQuerydroppableを（jQuery draggableと組み合わせて）使用して、ユーザーがリストからアイテムをドラッグしてテーブルにドロップすることにより、HTMLテーブルに行を追加できるようにしています。

これはうまく機能しますが、現在のロジックでは、ユーザーがテーブルの行をドラッグアンドドロップすると、ドロップした行の下に新しい行が追加されます。

新しい行の追加位置は、ユーザーが既存の行の上半分にドロップしたか下半分にドロップしたかに基づいているとよいでしょう。

これはdropイベントで計算するのに十分簡単ですが、ユーザーがドラッグするときにUIフィードバックを提供する必要があります（たとえば、2つのCSSクラスdroppable-aboveをdroppable-below使用して行います）。

overイベントは1回しか発生しないため、これは不可能のようです。ユーザーが最初にドロップ可能な要素をドラッグしたとき。

overユーザーがドロップ可能な要素の上にいる間、マウスを動かすたびにイベントを発生させることは可能ですか？

もしそうなら、私はこれを行うことができるでしょう：

CSSスタイルは次のようになります...

jQuery UI のDraggable & Sortableを使用して、別のオブジェクトの隣に留まることなく、オブジェクトを要素内で自由に移動できるようにしようとしています。

どうすればこれを達成できますか？

2D スライダーのハンドルでjQuery UI Draggable インタラクションを使用しています。Draggable の「ドラッグ」イベントを使用して、ドラッグ中のスライダーの位置を更新します。

私が抱えている問題は、ドラッグされている要素が実際に位置を変更する前に、ドラッグ イベントが発生するように見えることです。そのため、drag イベントを使用してドラッグされている要素の位置を報告すると、移動先の位置ではなく、移動元の位置が報告されます。

ドラッグ可能な要素が移動されている位置のデータを何らかの形で取得する必要があります。

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

親DIVのどこにあるかに応じて積み重ねたい2つのドラッグ可能なDIVがあります。z-index を設定しようとしましたが、これは IE 9 では機能しますが、Firefox 4 では機能しません。

Firebug を使用すると、ドラッグされた要素の z-index が auto に設定されていることがわかります。

http://jsfiddle.net/a5jgm/6/で達成したいことの完全なデモ

お時間をいただきありがとうございます

私はこれに沿ったものであるUIのアイデアを持っています：

1. ドラッグ可能なアイテムが入った隠しコンテナがあります。
2. ユーザーが何かをクリックして、コンテナーを表示します。
3. ユーザーは、アイテムを収容者から「メインエリア」にドラッグできます。
4. アイテムがコンテナからドラッグアウトされると、残りのアイテムを含むコンテナは非表示に戻る必要があります。

私は以下のコードに従って到達しました、しかし私は問題に遭遇しました、それは私が回避する方法を理解することができません。

アイテムの親コンテナが非表示になると、アイテムも非表示になります。さらに、スライド効果により、アイテムの配置も影響を受けます。

これをどのように解決できるかについての考えやアイデアは大歓迎です:)そして、私が間違った方向に進んでいる場合は、自由に正しい方向を指してください:)

よろしくお願いします、オラ

2 つ以上の要素間に線を引いてそれらを接続するにはどうすればよいですか? HTML/CSS/JavaScript/SVG/Canvas の任意の組み合わせで問題ありません。

あなたの答えがこれらのいずれかをサポートしている場合は、それについて言及してください。

• ドラッグ可能な要素
• ドラッグ可能/編集可能な接続
• 要素の重複回避

この質問は、その多数のバリエーションを統合するために更新されました。

同じアイテムでjQueryUIの並べ替え可能+ドラッグ可能+ドロップ可能を使用したいと考えています。すべての.item要素を並べ替えて、.itemを別の要素にドラッグアンドドロップできるようにしたいと思います。以下は私のコードです：

並べ替え可能+ドラッグ可能+ドロップ可能を使用すると、どちらか一方だけが機能し、すべてが一緒に機能するわけではありません。これを達成するために私は何が欠けていますか？

ありがとう！