ユーザーがテキストを追加できるJavaScriptページを作成しました。ユーザーは、色、太字の斜体、サイズ、フォントを設定できます。サイズとドロップオプションは、ドロップダウンボックスから選択します。
見た目は気にせず、機能だけなので、少し面倒な雰囲気に見えます。
ウィジェットに表示される要素を追加すると、画面に表示されている私が作成した画像の所定の位置に要素をドラッグできます。ユーザーがテキストの位置に満足したら、[保存]をクリックして座標を生成し、テーブルのXおよびY座標フィールドを更新します。この時点で、新しい行が生成され、新しい要素を追加するプロセスを繰り返すことができます。彼らが満足しているときはいつでも、彼らは保存をクリックし、それは後で検索されるためにそれを保存するためにデータベースに送信されます。
私の問題は、新しいテキストフィールドを追加するたびに、要素が一定量押し下げられることです。
elementCount（新しいラベル要素を追加するたびに自動インクリメントする）を受け取るデクリメント変数を追加し、それを設定された量で乗算してデクリメントすることで、これを修正しました。
decr -= (elementCount* 16);
これは中程度のテキストサイズでは問題なく機能しますが、さまざまなテキストサイズとフォントの組み合わせを追加し始めると、要素が押し下げられる量が変わるため、追加する他のすべての要素がますます悪化します。
このように新しい要素が追加されます
elementCount++;
var Text = textArray[textArray.length-1];
var Font = fontArray[fontArray.length-1];
var Color = colorArray[colorArray.length-1];
var Bold = boldArray[boldArray.length-1];
var Size = sizeArray[sizeArray.length-1];
var Italics = italicsArray[italicsArray.length-1];
var X = xCordArray[xCordArray.length-1];
var Y = yCordArray[yCordArray.length-1];
var newdiv = document.createElement('div');
newdiv.innerHTML = "<span><font color='" + Color + "' size = '" + Size + "' face='" + Font + "'><label class = 'drag2' id = 'text" + firstCount + "'> " + Text + "</label></font></span>";
document.getElementById(divName).appendChild(newdiv);
var decr= 32;
decr-= (elementCount* 16);
Y = parseInt(Y) + test;
X = parseInt(X) + 24;
document.getElementById("text" + elementCount).style.left = X + "px";
document.getElementById("text" + elementCount).style.top = Y + "px";
ドラッグアンドドロップのJavaScriptコードは、このチュートリアルに基づいています
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx
新しい要素を動的に追加するときに、新しい要素を追加するたびに自動的に画面に押し下げられないようにする方法はありますか？私は過去数日間、これを修正するために非常に多くの異なるオプションを試しましたが、運がありませんでした。
助けてくれてありがとう
テキスト要素のCSSを編集する
.text1{
position: relative;
left: 0px;
top: 0px;
}