イメージ、実現したいこと。
ユーザーは、コンテンツとアイテムを含むカードを作成できます。ユーザーはアイテムやカード自体にコメントすることもできます。次に、写真のようにコメントを表示する必要があります。plumb.jsで作った接続線。Div は jQuery で右に配置できます
$('#c' + comment.id).position({ my: "left top", at: "right top", of: $('#'+comment.parent), collision: "none" });
データベースにコメントの親要素IDを保存します。例: 「カード アイテム 1」ID は i95 (i = アイテム、95 はデータベースからの自動インクリメント) です。
問題:
- 「アイテム 2 のユーザー コメント」CSS の位置を特定できません。
- 1 つのアイテムに対して 2 つ以上のコメントがある場合、コメントの後にコメントを配置するにはどうすればよいですか? jQuery position() 属性の衝突は役に立ちません。（コメントはお互いにトップです）。（これが一番の問題）
- コメントがコメントされている場合は、コメントを右側に配置する必要があります。
サーバーウィッチから取得したカードとコメントは、3 つの JS オブジェクトです。(1 つはカード、1 つはアイテムとコメントです)。最初にカードを引き、次にアイテムを引き、その後にコメントします。コメント オブジェクトには、カード ID、親 ID があります。コメント オブジェクト内のコメントは順不同です。
1 つのアイデアは、コメントの順序を並べたリストを作成することです。カードに記載されている項目の順序を知っています。次に、コメント オブジェクトをループして、現在のカードのコメント数を検出し、検索します。
- カードコメント
- カードコメントコメント
- アイテム no1 コメント
- アイテム no1 コメント コメント
- アイテム no2 コメント、、、など
次に、アイテムをDOMに追加し、各コメントの高さを計算してから、すべての位置を計算します..
しかし、これを達成するためのより良い方法があるかもしれません...私はIEブラウザを気にしません:)
サーバー側はnode.js、