問題タブ [angulardraganddroplists]

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 に答える
396 参照

angularjs - dragLeave の検出方法

angular-drag-and-drop-listsではdnd-dragover、ディレクティブを自由に使用できます。dragLeaveイベントを検出する方法がわかりません。問題はng-mouseleave、アイテムがドラッグされている間は呼び出されないため、ディレクティブを使用できないことです。同じことが他の JS または CSS ソリューションにも当てはまります。

dragLeaveイベントを検出する方法はありますか?

私はこの答えを見てきました:ドラッグ中にマウスオーバーイベントを開始する方法しかし、提案されたすべてのソリューションは、使用したくないXY座標のために機能しています。

0 投票する
0 に答える
362 参照

javascript - ドラッグ アンド ドロップ リストと仮想リピーター

アプリケーションで並べ替え可能なドラッグ アンド ドロップ リストを作成する必要があります。そのため、このために、少量のアイテムに対して正常に機能する角度付きドラッグ アンド ドロップ リストを使用しました。

ただし、私のアプリケーションには何千もの項目がある場合があります。したがって、速度を向上させるには、 が提供するmd-virtual-repeatAngular Materialを使用する必要があります。適切な数の要素でモデルをバックグラウンドに保持します。ただし、DOM は、仮想コンテナー内に表示されるもののみをレンダリングします。

ライブラリは$index要素を追跡するためにレンダリングを使用するため、仮想リピーターを使用すると、$index現在は仮想であるため、あらゆる種類の問題が発生します。

たとえば、これらの問題のいくつかは次のとおりです。

  • ドラッグした要素がmodel

  • ドロップ位置にあった要素はmodel

  • ドラッグ中に一部の要素が元の要素から失われる場合がありますmodel

  • 等...

この問題に取り組むために何を提案しますか?

このライブラリを使用するよりも簡単な解決策はありますか?

ありがとうございました

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

javascript - angular-drag-and-drop-lists ドラッグされた要素が消える (クロム)

ここでは angular-drag-and-drop-lists パッケージを使用して、ドラッグ アンド ドロップ リストを作成しています。ただし、ドラッグされている要素は常に消えます。すべてのデモで、マウスで要素を移動すると、ドラッグされた要素が表示されます。しかし、以下の実装ではこの要素を確認できません。

css を次のように設定しました。

.dndDraggingSource {display: none}プレースホルダーを見ることができ、元の要素が正しく消えることを確認しました。ただし、 で識別されるようにドラッグされている要素は.dndDragging:not(.dndDraggingSource)、コンテンツのない適切なサイズの赤いブロックとして表示されます。

ドラッグの舞台裏で何が起こっているのか? このドラッグされた要素がデモ コードで正しく表示されるのはなぜですか? display: noneonを使用するのが一般的であるように思われる.dndDraggingSourceので、ドラッグされている別の DOM 要素があると確信しています。そのDOM要素とは何ですか?どうすればそれを調べることができますか? 振る舞いからすると、引きずり回されている別の要素があると思います。しかし、angular-drag-and-drop-lists.js のソース コードを調べると、element.on('dragstart', function() {}ブロックは でタグ付けされた要素のコピーを作成するために何もしていません.dndDraggingSource

==更新==

それで、意味不明なことを div に詰め込むと、それが表示されることに気付きました。しかし、スパンもドスもあり{{item.title}}ません。これを機能させるためにデータモデルで何かする必要がありますか?

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

angularjs - dnd-list が空の配列の場合、angular-drag-and-drop-lists ドロップ ゾーンは機能しません

私のシナリオでは、ドロップ ゾーンは最初は空なので、dnd-list 用に空の配列を作成しました。次に、angular-drag-and-drop-lists が機能していないことに気付きました。ドラッグオーバーとドロップのコールバックも呼び出されません。

これをデモするためにプランカーを作成しました:

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

scripts.js を開き、配列を変更して何か (空のオブジェクトなど) を含めるまでは機能しません。これは意図した動作ですか、それとも欠陥ですか?

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

javascript - AngularJS: angular-drag-and-drop-lists dnd-allowed-types が一致する dnd-type に対して true に評価されない

現在、angular-drag-and-drop-listsを使用して JsonDTO オブジェクトを生成しています。JSON からのグラフィカル表現の生成は正常に機能します。また、さまざまな要素をドラッグ アンド ドロップして JSON を生成することもできます。私は主にネストされたリストのチュートリアルを使用して、初期リストをセットアップし、新しい要素をドラッグするためのボタンをセットアップしました。ただし、これは、dnd-type を li-elements に、dnd-allowed-type を ul-elements に追加しようとするまでしか機能しません。その「エディター」で作成したいJsonには、サブ要素の特定の階層構造があるため、これらのタイプを使用することが要件です。

私がそれをどのように実装したかを以下のコードスニペットで見つけてください。さらに情報が必要な場合はお知らせください。誰かがこの問題で私を助けてくれれば本当に感謝しています

何かを挿入したいリスト:

新しいページをドラッグするためのボタン:

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

jquery - ドラッグしたアイテムが正しい位置に戻らない

角度のあるドラッグ アンド ドロップ プラグインを使用しています。この問題は、マウスでページをある程度スクロールしたときに発生します。次に、アイテムをドラッグして離しました。解放されたアイテムが間違った位置 (つまり、実際の位置よりも数ピクセル上) に戻っています。この問題は、角度のあるアプリでのみ発生し、jsfiddle や codepen などの他の場所では再現できません。そのため、スクリーンは問題を記録し、以下のリンクにアップロードしました

誰かがこの問題を解決するのを手伝ってください..事前に感謝..