問題タブ [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.
angularjs - dragLeave の検出方法
angular-drag-and-drop-listsではdnd-dragover
、ディレクティブを自由に使用できます。dragLeaveイベントを検出する方法がわかりません。問題はng-mouseleave
、アイテムがドラッグされている間は呼び出されないため、ディレクティブを使用できないことです。同じことが他の JS または CSS ソリューションにも当てはまります。
dragLeave
イベントを検出する方法はありますか?
私はこの答えを見てきました:ドラッグ中にマウスオーバーイベントを開始する方法しかし、提案されたすべてのソリューションは、使用したくないXY座標のために機能しています。
javascript - ドラッグ アンド ドロップ リストと仮想リピーター
アプリケーションで並べ替え可能なドラッグ アンド ドロップ リストを作成する必要があります。そのため、このために、少量のアイテムに対して正常に機能する角度付きドラッグ アンド ドロップ リストを使用しました。
ただし、私のアプリケーションには何千もの項目がある場合があります。したがって、速度を向上させるには、 が提供するmd-virtual-repeatAngular Material
を使用する必要があります。適切な数の要素でモデルをバックグラウンドに保持します。ただし、DOM は、仮想コンテナー内に表示されるもののみをレンダリングします。
ライブラリは$index
要素を追跡するためにレンダリングを使用するため、仮想リピーターを使用すると、$index
現在は仮想であるため、あらゆる種類の問題が発生します。
たとえば、これらの問題のいくつかは次のとおりです。
ドラッグした要素が
model
ドロップ位置にあった要素は
model
ドラッグ中に一部の要素が元の要素から失われる場合があります
model
等...
この問題に取り組むために何を提案しますか?
このライブラリを使用するよりも簡単な解決策はありますか?
ありがとうございました
javascript - angular-drag-and-drop-lists ドラッグされた要素が消える (クロム)
ここでは angular-drag-and-drop-lists パッケージを使用して、ドラッグ アンド ドロップ リストを作成しています。ただし、ドラッグされている要素は常に消えます。すべてのデモで、マウスで要素を移動すると、ドラッグされた要素が表示されます。しかし、以下の実装ではこの要素を確認できません。
css を次のように設定しました。
.dndDraggingSource {display: none}
プレースホルダーを見ることができ、元の要素が正しく消えることを確認しました。ただし、 で識別されるようにドラッグされている要素は.dndDragging:not(.dndDraggingSource)
、コンテンツのない適切なサイズの赤いブロックとして表示されます。
ドラッグの舞台裏で何が起こっているのか? このドラッグされた要素がデモ コードで正しく表示されるのはなぜですか? display: none
onを使用するのが一般的であるように思われる.dndDraggingSource
ので、ドラッグされている別の DOM 要素があると確信しています。そのDOM要素とは何ですか?どうすればそれを調べることができますか? 振る舞いからすると、引きずり回されている別の要素があると思います。しかし、angular-drag-and-drop-lists.js のソース コードを調べると、element.on('dragstart', function() {}
ブロックは でタグ付けされた要素のコピーを作成するために何もしていません.dndDraggingSource
。
==更新==
それで、意味不明なことを div に詰め込むと、それが表示されることに気付きました。しかし、スパンもドスもあり{{item.title}}
ません。これを機能させるためにデータモデルで何かする必要がありますか?
angularjs - dnd-list が空の配列の場合、angular-drag-and-drop-lists ドロップ ゾーンは機能しません
私のシナリオでは、ドロップ ゾーンは最初は空なので、dnd-list 用に空の配列を作成しました。次に、angular-drag-and-drop-lists が機能していないことに気付きました。ドラッグオーバーとドロップのコールバックも呼び出されません。
これをデモするためにプランカーを作成しました:
http://plnkr.co/edit/uMoA2bk1UB8gJVal6UAb?p=preview
scripts.js を開き、配列を変更して何か (空のオブジェクトなど) を含めるまでは機能しません。これは意図した動作ですか、それとも欠陥ですか?
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には、サブ要素の特定の階層構造があるため、これらのタイプを使用することが要件です。
私がそれをどのように実装したかを以下のコードスニペットで見つけてください。さらに情報が必要な場合はお知らせください。誰かがこの問題で私を助けてくれれば本当に感謝しています
何かを挿入したいリスト:
新しいページをドラッグするためのボタン:
jquery - ドラッグしたアイテムが正しい位置に戻らない
角度のあるドラッグ アンド ドロップ プラグインを使用しています。この問題は、マウスでページをある程度スクロールしたときに発生します。次に、アイテムをドラッグして離しました。解放されたアイテムが間違った位置 (つまり、実際の位置よりも数ピクセル上) に戻っています。この問題は、角度のあるアプリでのみ発生し、jsfiddle や codepen などの他の場所では再現できません。そのため、スクリーンは問題を記録し、以下のリンクにアップロードしました 。
誰かがこの問題を解決するのを手伝ってください..事前に感謝..