問題タブ [getboundingclientrect]

私はすでに px の親への子要素 ​​wrt の getBoundingClientRect() を使用して左と上の位置を計算し、あるコンポーネントから別のコンポーネントに渡し、期待される位置に子要素を配置することができますが、子要素を wrt に反応させたい親要素 、そのためには % で上と左の位置が必要です。コンソールから値と単位を px から % に変更しようとしましたが、望ましい応答性を得ることができましたが、コードでパーセンテージで計算しようとしても期待どおりに動作しません。応答性は達成されますが、子要素を正しい位置に配置しません。

以前のコードでは、 viewRect.left -movableClientRect.left のみを行っていたため、値は pixel であったため、 viewRect.left で除算してから * 100 で割って % に変換しようとしましたが、パーセンテージ値は子を配置しません要素を正しく。

位置を計算するためのディレクティブによる更新

moving.directive これで、子要素の x 位置と y 位置を計算します

子要素の左と上を計算して dataService に割り当てるディレクティブ

div (背景画像を含む) にいくつかの要素をドラッグ アンド ドロップし、コンテンツをアップロードします。アップロードする前に、ドロップされた要素の上、左の位置を親 div に対して計算します。これにより、上、左の位置を使用して、背景画像 ( png または jpeg) が渡されます。しかし問題は、要素が最初に配置された位置と比べてわずかに異なる位置に配置されることです。

アップロード前の HTML

上、左の位置を計算するための TS コード

CSS

レンダリングする前に、上記のアップロードされた HTML コンテンツの top、left、background-image の値を取得し、background-image、top、leftの値を適用して以下のコンテンツをレンダリングします

別の画面でレンダリングした後

[![ここに画像の説明を入力][2]][2]

CSS