問題タブ [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 に答える
835 参照

jquery - Jquery UI Droppable が動作せず、Firefox と Chrome でエラーが発生しますか?

Jquery Ui Draggable と Droppable を使用しています。Draggable は正常に動作しており、アイテムはドラッグされていますが、何らかの理由で Droppable が動作しませんでした。

ドロップ可能な機能で何かを警告すると、何も表示されません。

Jquery UI 1.6 と jquery 1.3.2 を使用しています。

これは私が使用しているコードです:

ajaxCartUpdate div で td をドラッグすると、コンソールで次のエラーが発生します。

Firefox の場合: F は未定義です

Chrome の場合: Uncaught TypeError: 未定義のプロパティ 'options' を読み取れません。

参考までに、td は実際には ajaxcartUpdate Div にドロップされていますが、アラートが表示されません。

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

jquery - Jquery-uiドラッグ可能なスクロール垂直のみ

そのため、画面の右下にドロップ可能な固定divがあります。ゴミ箱にドラッグできるドラッグ可能なもの(固定ドロップ可能)のリストがありますが、ゴミ箱の近くにドラッグしたときに水平スクロールバーが表示されないようにします。ドラッグ可能オブジェクトを水平方向にスクロールできないようにします。ページのさらに下にドロップできるドロップ可能なものが他にもあるので、それらに到達するには垂直方向にスクロールする必要があります。

これが問題のjsfiddleです。

ありがとう

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

jquery - マウスオーバーでドラッグ可能なjQueryをスナップする方法は?

jsfiddle を参照してください

現在、ドラッグ可能は 15px の距離からドロップ可能にスナップされています。snapTolerance で指定された固定ピクセルに基づいてスナップするのではなく、カーソル (ドラッグ可能) がターゲット上にあるときにターゲットにスナップする方法はありますか? 私はそれに多くの時間を費やそうとしました。しかし、回避策が見つかりませんでした。

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

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

html - jQueryUI - ソース ボックスから 2 つの宛先ボックスにドラッグし、移動したアイテムの ID と宛先ボックスの ID を取得する方法

jQueryUIのドラッグ可能/ドロップ可能/ソート可能を使用して、ソースボックスからいずれかの宛先ボックスにアイテムを移動(コピーではなく)しようとしています。これは、ユーザーがアイテムを必要なボックスに並べ替えることができるようにするためです。

  1. 次に、ページをサーバーに POST すると、選択内容とアイテムを入れたボックスが保存されます。そのため、アイテムがボックスの 1 つに「ドロップ」されると、ドロップされたアイテムの ID と、それが入れられたボックスの ID を取得する必要があります。これを後で配列/オブジェクトに格納します。
  2. ユーザーがドロップ可能なボックス内のアイテムを注文できれば便利ですが、重要ではありません。順序付けられていないリストがどのように機能するかのように、それらが自動的にうまく整列する必要があります。現時点では、アイテムは宛先ボックスのどこにでもドロップするため、すべてのアイテムが宛先ボックス内のいたるところにあります。
  3. ユーザーが考えを変えた場合、アイテムを移動先のボックスから移動元のボックスに戻すことができる必要があります。
  4. 以下のコードのシェルがありますが、動作せず、移動したアイテムの ID または宛先 ID を取得できないようです。新しい HTML5 データ属性を使用しようとしましたが、何も得られないようです。私のサイトは HTML5 なので、これらの新しいテクニックを使用できます。

更新:動作しました - JSfiddle以下の完全なソリューション:

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

jquery-ui - JqueryUIドロップ可能アウト関数

ドロップ可能な要素を離れるときにイベントをトリガーしたいので、このout関数を使用する予定です。しかし、私には2つのドロップ可能な要素があります。私が1つの要素のコードを書いたとき、それは機能しますが、2つでは機能しません。

HTML:

Jquery:

しかし、Out関数はトリガーされませんか?2回書くこともできますが、ドロップ可能な要素が20個ある場合、それは解決策ではありません。何か案は ?ありがとう !

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

jquery - jQuery UI のドラッグ アンド ドロップ

jQuery UI のドラッグ アンド ドロップを作成しています。その要素が移動先にドロップされるとすぐに、ドラッグされたオブジェクトのクラスを変更するのが好きです。そのための方法はありますか?私のコードは次のようになります

これで、「tech_new」を「droppable」にドラッグ アンド ドロップできます。ドロップした後、ドロップされた要素のクラス (つまり、tech_new のクラス) を変更する必要があります。

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

jquery - jQueryドラッグ可能、親divの外にドロップされたときのイベント

写真のリストがあり、ドラッグ可能に追加しましたが、写真を親divの外にドラッグすると、クラスを変更して、ドロップすると削除されることを示します。ユーザーがそれをドロップし、関数を起動させたい。(親divの外にある場合のみ)

したがって、liが.photosの外にドラッグされると、クラスを追加するために起動し、liがその外にドロップされると、起動してイベントを削除します。

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

javascript - jquery-ui-droppable は、ドラッグ可能な 2 種類の div を区別できませんか?

Jqueryui Droppable について質問があります。申し訳ありませんが、英語が下手です。飽和状態は次のとおりです。現在、3 つの div、div a、div b、および div c があり、div a と div b をドラッグ可能に、div c をドロップ可能にします。DIV C は div a と div c を受け入れることができます。問題は、div c が div a と div b を Copy として受け入れるか、div c が div a と div b を Shear として受け入れることができるかということです。これを取れ?

0 投票する
3 に答える
12306 参照

jquery - ソート可能でのドロップ可能な発火のjQuery UIドロップイベント

(既存の)ソート可能リストにドロップできる要素のリストがあります。ドロップ可能な要素がソート可能要素にドロップされたら、その要素を変更したいと思います。これは、droppable の drop イベントを呼び出すことで行います。

しかし、このドロップイベントは、ソート可能な要素がソート可能内でソートされたときにも発生するようです。そして、外部からドロップインしたときにドロップされた要素のみを変更したい。

Fiddle の完全な例

sortable 内でソートされているときに、ドロップイン要素を変更せずに変更するにはどうすればよいですか?

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

jquery-ui - jQueryUI:sortableの要素をdroppableに移動して元に戻します(またはmootoolsの代替)

タイルを含む並べ替え可能なものが1つあります。さらに、私はたくさんのドロップ可能なものを持っています。次のインタラクションが必要です。

ユーザーは、タイルを並べ替え可能なものからドロップ可能なものにドラッグできます。理想的には、これによりタイルが並べ替え可能から移動され、ドロップ可能に追加されます。さらに、ドロップ可能オブジェクトはもう何も受け入れないようにする必要があります。つまり、1つのドロップ可能オブジェクトに最大で1つのタイルが存在する可能性があります。このフィドルhttp://jsfiddle.net/yXeMw/2/で試しましたが、「移動」を機能させることができません。

それが機能すると、ユーザーはタイルをドロップ可能からソート可能に戻すこともできるはずです。これは、ここで試しました:( 2つのリンク制限のためにリンクを削除しました。同じフィドルのバージョン3でした)が失敗します。(「..から..への移動」の部分は同じであると思うので、アラートでのみ試しました。)アップデート1を参照してください。

私はこれを数日間試しましたが、理解できません。

PS:私はここSOで同様の質問をたくさん読みましたが、実際には私の問題と同じものはありません。つまり、要素をソート可能からドロップ可能に移動します。

編集:Mootoolsを使用した代替ソリューションも歓迎します。

更新1:ドロップ可能->ソート可能方向のみが機能しませんでした。これは、ソート可能内のタイルに、ソートfloat: left可能自体のサイズが実質的に0pxになり、ホバリングが不可能になる属性があったためです。修正されたフィドル:http://jsfiddle.net/yXeMw/5/

更新2:回避策を見つけましたが(私の答えを参照)、要素を移動するソリューションが必要です。appendTo私は何も、または働くことができませんでしappendた。