JavaScript拖放問題

好的我已經創建了一個JavaScript頁面供用戶添加文本，他們可以設置顏色，粗體斜體以及大小和字體。大小和放置選項通過下拉框選擇。JavaScript拖放問題

enter image description here

它看起來有點凌亂ATM，因爲我不擔心的樣子，只是功能。

當他們添加出現在窗口小部件中的元素時，他們可以將元素拖動到我創建的圖像上並顯示在屏幕上。只要用戶對文本的位置感到滿意，他們就點擊生成座標的保存並更新表格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";

拖放正是基於此教程

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

JavaScript代碼有沒有什麼辦法讓它所以當你動態地添加一個新的元素，它不會自動將其按照您添加的每個新元素向下推到屏幕上。在過去的幾天裏，我嘗試了很多不同的方法來解決這個問題，並且沒有運氣。

預先感謝任何幫助

編輯CSS文本元素

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

}

來源

2012-04-20 AdamM

新'div'是否有一些默認的CSS：'position：absolute;頂部：0;左：0;'？如果需要，還可以使用獨特的「z-index」。如果它沒有完全定位，它將遵循DOM的正常流程，其位置將受到其他元素的影響，反之亦然。 – MrCode 2012-04-20 16:07:49

請參閱我的編輯元素CSS的例子。我使用親戚，所以我想這可能是一個壞主意。將嘗試絕對，並看看是否有所作爲 – AdamM 2012-04-21 18:15:48

我改成絕對定位，並把它放在一個相對定位的容器內，現在完美的作品！

來源

2012-04-23 18:55:04 AdamM

JavaScript拖放問題

回答

相關問題