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拖放问题

回答

相关问题