JavaScriptドラッグアンドドロップの問題

Question

私はJavaScriptページを作成しました。ユーザーはテキストを追加できます。色と太字のイタリック体、サイズとフォントを設定できます。サイズとドロップオプションはドロップダウンボックスで選択します。

私はルックス、機能だけを心配していないですように、それは、少し厄介ATMを探します。

ウィジェットに表示される要素を追加すると、要素をドラッグして、自分が作成した画像を画面に表示することができます。ユーザーはテキストの位置に満足すると、保存をクリックして座標を生成し、テーブルXとYの座標フィールドを更新します。この時点で新しい行が生成され、新しい要素を追加するプロセスを繰り返すことができます。彼らが幸せであるときはいつでも、彼らは保存をクリックし、後で検索するためにそれを格納するためにデータベースに送るでしょう。

私の問題は、新しいテキストフィールドを追加するたびに、一定量だけ要素を押し下げてしまうことです。

私は（彼らは新しいラベル要素を追加するたびに自動インクリメント）し、elementCountをとるデクリメント変数を追加することで、これを整流し、これがためにうまく動作します

decr -= (elementCount* 16); 

によってデクリメントする設定量を掛け中程度のテキストサイズですが、異なるテキストサイズやフォントの組み合わせを追加すると、要素がプッシュダウンされる度合が変わり、追​​加する要素が1つおきに悪化します。

新しい要素は、それはあなたが動的に追加するときに作成する方法はあります。このチュートリアル

http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

に基づいたJavaScriptコードは、この

 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"; 

ドラッグ＆ドロップのように追加されます新しい要素を追加すると、新しい要素を追加するたびに自動的に画面の下に押されることはありません。私は過去数日間この問題を解決するために多くの異なるオプションを試してきましたが、運がなかったのです。

編集CSS、私は絶対位置に変更し、相対的な位置付け容器の内部に配置され、完全に機能するようになりました

.text1{ 
position: relative; 
left: 0px; 
top: 0px; 

} 

Answer 1

テキスト要素の任意のヘルプを事前に感謝！