問題タブ [dragula]

私は Dragula を使用しており、ドラッグしているオブジェクトをカーソルに追従させようとしています。どうすればこれを行うことができますか。

編集:ここのhtmlがどのように見えるかに注目する価値があるかもしれません:

Polymer 内で ready 関数を呼び出して、dragula を初期化します。

EDIT2：
何かをドラッグしようとしたときに表示される画像は次のとおりです。

左下にあるのは、画像をドラッグしているときに毎回表示されるもので、要素をドラッグする場所に関係なく、そこにとどまります。そこには要素も何もありません。テキストがそこに表示されるだけです。

EDIT3：

解決策:

問題の原因は、dragula.css を正しくインポートしていなかったことです。他の誰かがこの問題に遭遇した場合は、dragula.css を正しくインポートしたことを確認することをお勧めします。

この質問は少し長文ですが、何が起こっているのかを正確に理解してほしい...

会社で使用するタスク マネージャー デスクトップ アプリ ( Electron ) を構築していますが、奇妙な動作が発生しています。タスク マネージャーは 6 つの列 (従業員ごとに 1 つ) で構成され、完了すべきタスクの垂直リストが含まれています。タスクを並べ替えることができるように、ドラッグ アンド ドロップ機能が含まれています。

Dragulaを使用してドラッグ アンド ドロップ部分を処理し、すべてのタスクの ID 番号を上から順に収集して配列に格納しています。

PouchDBを使用してデータベースを更新し、実行中の他のアプリケーションを同期しています。

Dragula / PouchDB 側では、次のコードを使用しています。

この時点で、私の TaskData には、目的の値を持つ新しい「注文」キーが含まれています。次に、ReactJS コンポーネントを順番にレンダリングする必要があります。

(TaskData から更新された) props からタスクを取得し、必要なものを除外します。

次に、上記の順序番号で (lodash.js を使用して) タスクを並べ替え、並べ替えられたデータを React コンポーネントにマップします。

私のタスクは順番にレンダリングされ、すべてがうまくいっています。

さて、問題は...

["1", "2", "3", "4"]ドラッグ アンド ドロップしてタスクを からに並べ替えると["4", "1", "2", "3"]、実際には が表示されます["3", "4", "1", "2"]。タスクは移動および更新されます (上記の Dragula / PouchDB コードのため)。奇妙な... Dev Toolslocation.reload()と入力すると、驚いたことに、タスクが最初に望んでいた順序になっています["4", "1", "2", "3"]。

再試行して、タスクを から に移動する["1", "2", "3", "4"]と["1", "3", "2", "4"]、タスクは にリセットされ["1", "2", "3", "4"]ます。繰り返しlocation.reload()ますが、タスクは次のように並べられています: ["1", "3", "2", "4"].

これをデバッグしようとすると、機能を無効にする_.sortByと、ドロップされた後もタスクが置かれたままになることがわかりました (最初は順不同ですが)。タスクは目的の場所に移動し、目的の順序番号が付けられます。

また、 PouchDB を無効にして動作.put()を続け_.sortByても動作しますが、データがサーバーに書き込まれず、結果として注文番号が更新されないこともわかりました。

おそらく私はあまりにも長い間コードを見つめていたのでしょうが、なぜタスクが跳ね回っているのか理解できません。誰にもアイデアはありますか？

ご協力いただきありがとうございます！

次のようにdragula jsを使用してセクションを作成しようとしています:

http://bevacqua.github.io/dragula/

私が欲しいのは、ドラッグアンドドロップが動的であることです。そのため、ドラッグ アンド ドロップごとに各要素の位置を保存する必要があります。どうやってやるの？

phpとajaxでできることはわかっています。しかし、位置をどのように操作する必要があるかについてはわかりません

Meteor-Dragulaを使用しています。helloStringを持つコンテナーを#rightDOM 要素にドラッグするとします。その文字列にアクセスするにはどうすればよいですか? たとえば、文字列配列にプッシュします。

多分私はこのようなもので正しい軌道に乗っていますか？

ページ ビルダー テンプレート エディターに似たページがあります。Dragula.JSをドラッグ アンド ドロップのプラグインとして使用し、そのメソッド copy を使用して他のコンテナーから要素をコピーしました。これは次のようになります。

問題は、右側の列からドラッグして左側のボックスに配置すると、右側の列にある要素が正確にコピーされることです。これは私のコードです:

そして私のJS：

物を左のボックス コンテナーにドラッグすると、次のコードが配置されます。

それは私がしたいことではありません。質問は、右のコンテナから要素をコピーする方法と、左のボックスコンテナ要素に配置すると、これが私の目的に変わることです。要素を次のように変更します。

私の目的を達成できる他のドラッグアンドドロッププラグインを教えてください。

私は基本的な Vue.js オブジェクトを持っています:

HTML:

また、ドラッグ アンド ドロップ ライブラリ (dragula) を使用して、ユーザーが #playlist div を再配置できるようにしています。

ただし、ユーザーが dragula を使用してプレイリストを再配置した後、この変更は Vue には反映されplaylist.entriesず、DOM にのみ反映されます。

ドラッグラ イベントにフックして、移動した要素の開始インデックスと終了インデックスを決定しました。新しい順序を反映するために Vue オブジェクトを更新する正しい方法は何ですか?

フィドル: https://jsfiddle.net/cxx77kco/5/

この方法で、コンテナーの 3 つの div のセットを並べ替える必要があります。

部門クラスA

部門クラスA

div クラス B

部門クラスA

部門クラスA

div クラス B

3 番目の div ごとにクラス B にする必要があります。これを行うにはどうすればよいですか?新しい注文をコンテナーにプッシュするにはどうすればよいですか?

ありがとう、

新しいバッグに要素をドロップするときに確認モーダル ダイアログ (UI キット) を表示したいと思います (Angular 1.4.8 と angular-dragula を使用しています)。[OK] をクリックするとプロセスを続行したいのですが、[いいえ] をクリックすると、要素を元のバッグに戻したいと思います。

これはこれまでの私のコードです:

これまでのところ、ダイアログは完全に表示されており、[いいえ] をクリックするとイベントがトリガーされ、ドロップをキャンセルする方法が見つかりません (dragula のドキュメントで見つけようとしましたが、機能しませんでした。

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