JavaScript拖放问题

Question

好的我创建了一个用户可以添加文本的JavaScript页面，它们可以设置颜色，粗体斜体，以及大小和字体。通过下拉框选择大小和掉落选项。

看起来有点凌乱，因为我不担心外观，只是功能。

当他们添加小部件中出现的元素时，他们可以将元素拖动到我创建的图像上，该图像显示在屏幕上。每当用户对文本的位置感到满意时，他们单击save生成坐标并更新表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;

}

Answer 1

我改为绝对定位，把它放在一个相对定位的容器里，现在效果很好!!