2012-04-20 379 views
0

好的我已經創建了一個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; 

} 
+1

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

+0

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

回答

0

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