問題タブ [dragula]

ng2-dragula はクールに思えますが、angular 2 プロジェクト用にセットアップするのに苦労しています。system.jsモジュールプリローダーとして使用し、その構成は次のとおりです。

私のtsconfig.json：

そして、次のようにコンポーネントにロードします。

ブラウザで次のエラーが発生するように、私は何を間違っていますか:

コードペンはこちら: http://codepen.io/jasonsawtelle/pen/jqbeXd

これは基本的なセットアップであり、Dragula は機能していますが、div をドラッグすると、含まれている css のサイズ変更された画像がドラッグ イベント中にフルサイズにポップされます。

トーナメントを追跡するアプリのフロントエンドを開発しています。1 つのページで、ユーザーはトーナメントの結果を更新する必要があります。これは、処理のために PHP バックエンドに送信する、右側の最終結果テーブル内の左側のリストからプレイヤーをドラッグすることによって行われます (私はバックエンドを開発していません)。 、POST 経由で正しいデータを送信する必要があります)。私の要件は次のとおりです。

1. プレイヤーのリストを持っている
2. 各行の位置が固定された結果テーブルを用意します (1 行目に 1 行、2 行目に 1 行)。
3. 各位置には 4 つの関連する入力があり、すべて という名前が付けられposition-1-NAME、同じ行に異なる列があります。
4. ユーザーはプレーヤーを各位置にドラッグできる必要があります
5. 1 人のプレーヤーは 1 つのポジションにのみ配置でき、各ポジションには 1 人のプレーヤーしか配置できません
6. プレーヤーがテーブルに配置されたら、リストから削除する必要があります

私はいくつかのアプローチを試しましたが、近いものはDragula JSプラグインを使用することです。

ul次に、 を使用してプレイヤーのリストを作成しid、Dragula のコンテナーにします。

次に、タグtable内にformがあり、フィールドの名前はすべて、次のように位置に従って名前が付けられますposition-1-name-of-the-input。

次に、JavaScript で、ドラッグされたtext()からを取得し、 のの属性内に配置するハックを作成して、最初の位置にあるプレーヤーの名前をバックエンドに送信できるようにしました。コード：livalueinputtable

これまでのところ、これはいくつかのバグで動作しています:

1. 同じ に 2 人のプレーヤーをドロップできますtd。両方とも UI にドラッグliされて表示されますが、フォームには最後にドロップされたプレーヤーの値しかありません。

2. プレーヤーをすべての位置に次々とドラッグすると、別のプレーヤーをその位置にドラッグするまで、すべての入力がその名前の値になります。

だから、私はいくつかのことを達成したい：

1. 各 内に 1 人のプレーヤーのみを許可しますtd class="target"。tdクラスを削除して無効にしようとしました.targetが、ドロップされた後、プレーヤーを再び移動できません。

2. プレーヤーをドラッグするときに入力の値を削除します。

私はこれがちょっとしたハックであることを知っていますが、私は JS/jQuery の経験があまりなく、これが今のところリモートで機能する唯一のソリューションです。

私の質問:

1. tdDragulaまたはJS / jQueryコードを使用して、複数のプレーヤーフォームが同じフォームにドラッグされるのを防ぐにはどうすればよいですか?

2. [解決済み - 編集を参照]プレーヤーを からドラッグしたときにvalueを削除するにはどうすればよいですか?inputtd

3. 推奨するこれらの要件を実装するより良い方法を知っていますか?

編集

次のコードを追加することで、質問2を解決できました。

https://github.com/valor-software/ng2-dragulaを JSPM パッケージ マネージャーで管理されている Angular2 プロジェクトにインジェクトしようとしていました。しかし、それをインポートすると、メインの boot.js ファイルがコンパイルに失敗します...以前に見つけた唯一の解決策は、プロジェクトを webpack 管理に移動することでした。他の解決策はありますか？

次のように ng2-dragula を使用してドラッグ/ドロップする Angular2 コンポーネントがあります。

私の問題:複数の「my-comp」コンポーネントを作成すると、「card-bag」内のアイテムは、同じバッグ名を持っていても、これらのコンポーネント間でドラッグ/ドロップできません。これらのアイテムは、所有するコンポーネント内でのみドラッグ/ドロップできます。

コンポーネント間でドラッグ/ドロップするための構成はありますか? それともこれは ng2-dragula の制限ですか?

ありがとう。