問題タブ [jquery-ui-droppable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1703 参照

jquery - JQuery ドラッグ可能 + ドロップ可能 + ソート可能

これは以前に回答されたと確信していますが、私の状況に合った例が見つかりません。ドラッグ可能な画像のリストがあります。ドロップ可能およびソート可能に設定された div (id="dropZone") もあります。画像がdivにドラッグアンドドロップされたときに関数を起動したいのですが、並べ替えによってdivにドロップされたときではありません。これが私が試したことです:

これはドロップ可能な画像に追加しましたが、ドロップ可能な外にドロップされた場合でも発生します。

次に、これをドロップ可能に追加しようとしましたが、これにより、ドラッグからドロップされたときとソートされたときの両方で画像が追加されます。

私が何をする必要があるか知っている人はいますか?

0 投票する
4 に答える
14325 参照

jquery - ドロップイベントでカスタムhtmlでjqueryドラッグ可能+ソート可能?

ドロップ可能領域に要素をドロップするときに html を変更します。

このようなもの: http://the-stickman.com/files/jquery/draggable-sortable.html

しかし、要素の変更をドロップすると、html が配置されます。

その他の例: 最初のドラッグ可能なリストと 2 番目のドロップ可能なリストの 2 つのリストがあります。最初のリストから要素をドラッグし、この要素を 2 番目のリストにドロップすると、要素は 2 番目のリストに複製されます。

ドラッグ:

落とす:

このhtmlを次のように変更したい

ドラッグ:

落とす:

0 投票する
1 に答える
492 参照

jquery - jQuery UI でアイテムを交換するときにクローンがフローティング バックしないようにする

jQuery のドラッグ可能/ドロップ可能を使用して、グリッド内の要素を交換できるようにしています。たとえば、要素 1 を要素 2 にドロップすると、場所が変わります。

2 つの問題があります。

  1. ドラッグ アンド ドロップが成功した後も、クローンは元の位置に戻ります。どうすればこれを防ぐことができますか? 有効なターゲットにドロップされていない場合にのみ、フロートバックしたい.

  2. 理想的には私も設定したいのですhelper: originalが、これを試してみると、関数内のスワップされた位置を正しく計算する方法がわかりませんでしたdrop

コードをjsFiddleに配置し、参照用に以下に示します。

0 投票する
1 に答える
185 参照

jquery-ui-droppable - jQueryのドロップ可能な問題

ユーザーが画面上に2つのボックスを作成し、一方を他方にドラッグアンドドロップできるようにするjQueryコードを作成しました。HTMLの観点からは、次のようになります...

次に、別のボックスを作成し、それをボックス2の上にドラッグしてドロップすると、常にボックス1(つまりボックス2の親)にドロップされます。私が欲しいのはこれです...

...しかし、私が得るのはこれです...

あなたは[以前は可能でした]これがここで起こっているのを見る ことができます... http://acarna.com/editor.php <-私は問題を修正しました...以下の私の答えを参照してください

左上の「H」ボタンをクリックしてボックスを作成します。ボックスの右上隅にある灰色の四角をつかんで、ページのさらに下にドラッグします。ボックスの端または隅にマウスを移動して、サイズを変更します。

次に、もう一度「H」をクリックしてボックス2を作成します。ボックス2をボックス1にドラッグアンドドロップします。これは正しく機能します。Firefoxを使用している場合は、マウスオーバーでボックス1に追加されたボックスが表示されます。

私が抱えている問題は、ボックス3を作成し、それをボックス2の上に移動して、中にドロップしようとするときです。ボックス1のみを検出し、その中にドロップします。

ボックス3をドラッグしたときにjQueryがボックス2を検出し、代わりにそこに追加するために欠けているトリックはありますか?

0 投票する
1 に答える
4459 参照

jquery-ui - droppableのDropイベントで$(item).sortable('cancel')を呼び出すと、sortableが無効になります

私はいくつかのソート可能な接続リストを持っていますが、それは同時にドロップ可能な場所です。問題は、droppableのdropイベントでsortableのcancelメソッドを呼び出すと、sortableが壊れて、機能しなくなることです。例http://jsfiddle.net/zSnBA/10/2番目のリストのdiv番号102を移動してみてください。キャンセルイベントが呼び出されますが、ソート可能機能は機能しなくなりますか?何か助けはありますか?

0 投票する
1 に答える
2961 参照

jquery - ドラッグ可能なスナップをドロップ可能なスナップにする方法、スワップを許可する?

これをどう聞いたらいいのかわかりませんが、左側に 3 つの要素 (A、B、C) が存在し、右側の 3 つの要素 (1、2、3) にドラッグできるインターフェイスを作成しようとしています。

ドロップしたときに左のアイテムを右のアイテムにスナップしたいが、他の 2 つのアイテムと交換可能にしたい。

A、B、C を右側にスナップさせることはできますが、入れ替えることはできないようです。をドロップに設定するui.draggable.positionと、右に並べ替える方法がわかりません。それらを複製して無駄に削除しようとしましたが、最終的にエラーが発生しました。

私はこれまでのところこれを持っています: http://jsfiddle.net/7xFsr/13/

前もって感謝します!

0 投票する
1 に答える
3957 参照

jquery - droppableにすでに別のドラッグ可能な要素が含まれているかどうかを確認します(jQuery UI)

ドロップ可能なdiv要素があり、ドラッグ可能な要素をドラッグするとフェードアウトします。これは、outイベントを使用して正常に機能します。私が得ている問題は、ドロップ可能な要素に2つのドラッグ可能な要素がある場合です。ドロップ可能な要素は、ドラッグしてもフェードします。ドロップ可能な要素にドラッグ可能な要素がもう1つあるかどうかを確認して、フェード効果をキャンセルするにはどうすればよいですか。ドロップ可能な要素は、最後のドラッグ可能な要素が削除されたときにのみフェードするようにします。

0 投票する
1 に答える
259 参照

jquery - アラートメッセージを無効にして、jQueryUIにドロップするだけです

jQueryのドラッグアンドドロップ機能を実行しました。しかし、そこには少し間違いがあります。警告メッセージのある関数を見つけましたが、それは必要ありません。要素だけをドロップしたい。これが私のコードです:

0 投票する
2 に答える
593 参照

jquery - jQueryを使用してクローン画像をドロップするにはどうすればよいですか?

クローン画像をドロップできません。しかし、これは私がhelper:"clone"オプションにコメントするときに機能します。

0 投票する
2 に答える
2483 参照

jquery - jQuery、複数のドラッグ可能なオブジェクトの元の位置を保存して元に戻す

jsfiddle を参照してください

「ドラッグ可能な」オブジェクトをターゲットにドロップすると、次に元に戻すときにその特定の位置が使用されます。ドラッグ可能なオブジェクトの元の位置を保存し、常に元の位置 (最初の位置) に戻す方法はありますか? または、同じ目標を達成するために「それらを保存する」以外の解決策はありますか?

似たような質問を見つけましたが、元に戻すために位置 (左、上) がハードコーディングされています。私は一生懸命努力しましたが、解決策を見つけることができませんでした。

ありがとうございました。